neba 0.0.1 → 1.1.0

package/dist/internal/calendar.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{Button as r}from"../components/button/Button";import{ChevronIcon as a}from"./icons";import{controlHeightClasses as l,controlTextClasses as s,cx as i,gapClasses as c,metaTextClasses as u,pressTransitionClasses as d,srOnlyClasses as m,transitionClasses as h}from"./styles";import{addDays as g,addMonths as f,addYears as b,calendarWeeks as p,compareDay as v,dateFormatter as x,daysInMonth as w,isDayOutside as y,isMonthBeforeYear as D,isSameDay as N,isSameMonth as S,isValidDate as M,makeDate as P,meridiemLabels as C,monthLabels as k,startOfDay as Y,startOfMonth as z,today as A,weekdayLabels as F,withTime as E,YEAR_PAGE_SIZE as T,yearPageStart as j}from"./date";export const defaultPickerLabels={previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",now:"Now",clear:"Clear",done:"Done",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End"};export function usePickerLabels(e){return o.useMemo(()=>e?{...defaultPickerLabels,...e}:defaultPickerLabels,[e])}const R={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},B={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-xs)",md:"rounded-(--neba-radius-sm)",lg:"rounded-(--neba-radius-md)",xl:"rounded-(--neba-radius-lg)"},H={xs:"rounded-s-(--neba-radius-xs)",sm:"rounded-s-(--neba-radius-xs)",md:"rounded-s-(--neba-radius-sm)",lg:"rounded-s-(--neba-radius-md)",xl:"rounded-s-(--neba-radius-lg)"},L={xs:"rounded-e-(--neba-radius-xs)",sm:"rounded-e-(--neba-radius-xs)",md:"rounded-e-(--neba-radius-sm)",lg:"rounded-e-(--neba-radius-md)",xl:"rounded-e-(--neba-radius-lg)"},K=["relative flex select-none items-center justify-center tabular-nums","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,d,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--n-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function O({children:n,label:o,selected:r,inRange:a=!1,rangeEdge:l=null,current:s=!1,muted:c=!1,disabled:u=!1,focused:d=!1,size:m,className:h,onClick:g,onPointerEnter:f,onKeyDown:b}){return t("button",{type:"button",role:"gridcell","aria-label":o,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":u||void 0,tabIndex:d?0:-1,"data-focus-target":d?"true":void 0,className:i(K,"start"===l?H[m]:"end"===l?L[m]:"middle"===l?"rounded-none":B[m],u?"cursor-not-allowed text-(--neba-disabled-fg)":r?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":a?"cursor-pointer bg-(--n-soft) text-(--neba-fg) hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)":s?"cursor-pointer font-semibold text-(--n-accent) hover:bg-(--n-soft) active:bg-(--n-soft-press)":c?"cursor-pointer text-(--neba-muted-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)",h),onClick:()=>{u||g()},onPointerEnter:f,onKeyDown:b,children:[n,s?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function U({size:o,color:u,view:d,month:m,locale:h,labels:g,showPreviousButton:f,showNextButton:b,onStep:p,onViewChange:v}){const x=k(h,"long")[m.getMonth()],w=String(m.getFullYear()),y=D(h),N="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],S=(t,n)=>n?e(r,{variant:"text",size:o,color:u,density:"compact","aria-label":N[-1===t?0:1],onClick:()=>p(t),startIcon:e("span",{className:i("flex items-center",-1===t?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(a,{})})}):e("span",{"aria-hidden":"true",className:i(l[o],"w-(--n-cell)")}),M=t=>e("span",{className:i("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",t&&"rotate-180"),children:e(a,{})}),P=e(r,{variant:"text",size:o,color:u,density:"compact","aria-label":g.chooseMonth,"aria-expanded":"month"===d,onClick:()=>v("month"===d?"day":"month"),endIcon:M("month"===d),children:x},"month"),C=e(r,{variant:"text",size:o,color:u,density:"compact",className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,onClick:()=>v("year"===d?"day":"year"),endIcon:M("year"===d),children:w},"year"),Y=j(m.getFullYear());return t("div",{className:"flex items-center justify-between gap-1",children:[S(-1,f),e("div",{className:i("flex min-w-0 flex-1 items-center justify-center",c[o]),children:"year"===d?e("span",{className:i("flex items-center font-medium tabular-nums text-(--neba-fg)",l[o],s[o]),children:`${Y}–${Y+T-1}`}):"month"===d?C:t(n,y?{children:[P,C]}:{children:[C,P]})}),S(1,b)]})}export function Calendar({size:n,color:r,locale:a,weekStartsOn:l,month:s,onMonthChange:u,selected:d,rangeStart:m=null,rangeEnd:h=null,onSelect:g,onPreviewChange:p,minDate:v,maxDate:x,shouldDisableDate:w,showOutsideDays:D=!0,autoFocus:N=!1,showPreviousButton:C=!0,showNextButton:k=!0,labels:F,className:E}){const[j,B]=o.useState("day"),H=o.useMemo(()=>d.filter(M),[d]),[L,K]=o.useState(()=>{const e=H.find(e=>S(e,s));return e?Y(e):S(A(),s)?A():z(s)}),O=o.useRef(N),_=o.useRef(null);o.useEffect(()=>{K(e=>S(e,s)?e:z(s))},[s]),o.useLayoutEffect(()=>{O.current&&(O.current=!1,_.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const V=o.useCallback(e=>y(e,v,x)||(w?.(e)??!1),[v,x,w]),G=e=>{O.current=!0,B(e)},J=e=>{O.current=!0,u(e)};return t("div",{ref:_,className:i("flex flex-col",c[n],E),style:{"--n-cell":R[n]},onPointerLeave:()=>p?.(null),children:[e(U,{size:n,color:r,view:j,month:s,locale:a,labels:F,showPreviousButton:C,showNextButton:k,onStep:e=>{u("day"===j?f(s,e):b(s,"month"===j?e:e*T))},onViewChange:G}),e("div",{className:"h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*7)]",children:"day"===j?e(q,{size:n,locale:a,weekStartsOn:l,month:s,chosen:H,rangeStart:m,rangeEnd:h,focusedDate:L,showOutsideDays:D,isDisabled:V,onSelect:e=>{K(e),g(e)},onPreviewChange:p,onMoveFocus:e=>{O.current=!0,K(e),S(e,s)||u(z(e))}}):"month"===j?e(I,{size:n,locale:a,month:s,chosen:H,minDate:v,maxDate:x,onMoveCursor:J,onPick:e=>{u(P(s.getFullYear(),e,1)),G("day")}}):e($,{size:n,month:s,chosen:H,minDate:v,maxDate:x,onMoveCursor:J,onPick:e=>{u(P(e,s.getMonth(),1)),G("month")}})})]})}function q({size:n,locale:o,weekStartsOn:r,month:a,chosen:l,rangeStart:c,rangeEnd:d,focusedDate:m,showOutsideDays:h,isDisabled:b,onSelect:w,onPreviewChange:y,onMoveFocus:D}){const P=p(a,r),C=F(o,r,"short"),k=F(o,r,"long"),Y=x(o,{dateStyle:"full"}),z=(T=d,M(E=c)&&M(T)?v(E,T)<=0?[E,T]:[T,E]:null);var E,T;const j=A();return t("div",{role:"grid",className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:C.map((t,o)=>e("span",{role:"columnheader","aria-label":k[o],className:i("flex h-(--n-cell) items-center justify-center font-medium text-(--neba-muted-fg) select-none",u[n]),children:t},o))}),P.map((t,o)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(t=>{const o=!S(t,a);if(o&&!h)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--n-cell)"},t.getTime());const c=l.some(e=>N(e,t)),u=null!==z&&v(t,z[0])>=0&&v(t,z[1])<=0,d=null!==z&&u&&N(t,z[0]),p=null!==z&&u&&N(t,z[1]);return e(O,{size:n,label:Y.format(t),selected:c,inRange:u&&!c,rangeEdge:u?d&&p?"both":d?"start":p?"end":"middle":null,current:N(t,j)&&!c,muted:o,disabled:b(t),focused:N(t,m),className:i("size-(--n-cell)",s[n]),onClick:()=>w(t),onPointerEnter:()=>y?.(t),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-r+7)%7,o={ArrowLeft:()=>g(t,-1),ArrowRight:()=>g(t,1),ArrowUp:()=>g(t,-7),ArrowDown:()=>g(t,7),Home:()=>g(t,-n),End:()=>g(t,6-n),PageUp:()=>f(t,e.shiftKey?-12:-1),PageDown:()=>f(t,e.shiftKey?12:1)}[e.key];o&&(e.preventDefault(),D(o()))})(e,t),children:t.getDate()},t.getTime())})},o))]})}function I({size:t,locale:n,month:o,chosen:r,minDate:a,maxDate:l,onMoveCursor:c,onPick:u}){const d=k(n,"short"),m=k(n,"long"),h=o.getFullYear(),g=new Date,b=e=>{const t={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==t&&(e.preventDefault(),c(f(z(o),t)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(n=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(c=>{const f=3*n+c,p=P(h,f,1),x=P(h,f,w(h,f));return e(O,{size:t,label:`${m[f]} ${h}`,selected:r.some(e=>e.getFullYear()===h&&e.getMonth()===f),current:g.getFullYear()===h&&g.getMonth()===f,disabled:M(a)&&v(x,a)<0||M(l)&&v(p,l)>0,focused:f===o.getMonth(),className:i("h-(--n-cell) w-full",s[t]),onClick:()=>u(f),onKeyDown:b,children:d[f]},f)})},n))})}function $({size:t,month:n,chosen:o,minDate:r,maxDate:a,onMoveCursor:l,onPick:c}){const u=j(n.getFullYear()),d=(new Date).getFullYear(),m=e=>{const t={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-T,PageDown:T}[e.key];void 0!==t&&(e.preventDefault(),l(b(z(n),t)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(l=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(h=>{const g=u+4*l+h;return e(O,{size:t,label:String(g),selected:o.some(e=>e.getFullYear()===g),current:g===d,disabled:M(r)&&g<r.getFullYear()||M(a)&&g>a.getFullYear(),focused:g===n.getFullYear(),className:i("h-(--n-cell) w-full",s[t]),onClick:()=>c(g),onKeyDown:m,children:g},g)})},l))})}function _(e){const t=e.parentElement;if(!t)return;const n=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=n.top-o.top-t.clientTop+t.scrollTop,a=r+n.height;r<t.scrollTop?t.scrollTop=r:a>t.scrollTop+t.clientHeight&&(t.scrollTop=a-t.clientHeight)}export function TimeGrid({size:n,density:r,locale:a,value:c,referenceDate:u,onChange:d,hour12:h,showSeconds:g,hourStep:f,minuteStep:b,secondStep:p,shouldDisableTime:v,autoFocus:w=!1,labels:y,className:D}){const N=c??u,S=o.useRef(null),[M,P]=o.useMemo(()=>C(a),[a]);o.useEffect(()=>{const e=S.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(_),w){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[w]);const k=o.useMemo(()=>{const e=Math.ceil((h?12:24)/f),t=Array.from({length:e},(e,t)=>t*f);return h?t.map(e=>0===e?12:e):t},[h,f]),Y=o.useMemo(()=>Array.from({length:Math.ceil(60/b)},(e,t)=>t*b),[b]),z=o.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,t)=>t*p),[p]),A=e=>String(e).padStart(2,"0"),F=h?N.getHours()%12||12:N.getHours(),T=(t,o,r,a,u)=>e("div",{role:"listbox","aria-label":o,className:i("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*2)]","scroll-py-0.5 [scrollbar-width:thin]"),children:r.map(o=>{const r=((e,t)=>E(N,"hour"===e?{hours:h?t%12+(N.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:N.getHours()%12+12*t}))(t,o),m=null!==c&&a(o),g=v?.(r,t)??!1;return e("button",{type:"button",role:"option","aria-selected":m,"aria-disabled":g||void 0,"data-chosen":m?"true":void 0,className:i(K,B[n],l[n],s[n],"w-full shrink-0",g?"cursor-not-allowed text-(--neba-disabled-fg)":m?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)"),onClick:()=>{g||d(r)},children:u(o)},o)})},t);return t("div",{ref:S,className:i("flex","compact"===r?"gap-0.5":"gap-1",D),style:{"--n-cell":R[n]},children:[T("hour",y.hour,k,e=>e===F,e=>h?String(e):A(e)),T("minute",y.minute,Y,e=>e===N.getMinutes(),A),g?T("second",y.second,z,e=>e===N.getSeconds(),A):null,h?T("meridiem",y.meridiem,[0,1],e=>(N.getHours()>=12?1:0)===e,e=>0===e?M:P):null,e("span",{className:m,"aria-live":"polite",children:null===c?"":x(a,{hour:"numeric",minute:"2-digit",...g?{second:"2-digit"}:{}}).format(c)})]})}

package/dist/internal/date.d.ts

@@ -0,0 +1,170 @@
+/**
+ * The arithmetic and the naming the four pickers share.
+ *
+ * No date library under it, deliberately. Neba's one runtime dependency is Base
+ * UI, and a component library that quietly adds `date-fns` — or worse, picks a
+ * side in the dayjs/luxon/Temporal argument on its consumer's behalf — has made
+ * a decision that was not its to make. Everything here is either `Date`
+ * arithmetic, which is a dozen lines, or `Intl`, which the platform already
+ * ships and which knows more about month names in more languages than any
+ * bundled table ever will.
+ *
+ * Two rules hold everywhere below:
+ *
+ * - **Local time, always.** A calendar day is a thing a person is looking at on
+ *   a wall, not an instant on a line. `new Date(2026, 6, 27)` is midnight local
+ *   and every comparison here is made on the local Y/M/D triple, so a picker in
+ *   Seoul and a picker in São Paulo both light up the cell that says 27.
+ * - **Nothing is mutated.** `Date` is mutable and every method on it that sounds
+ *   like a question is actually a command. Each function here copies first, so a
+ *   `value` handed in by a caller is never the object that comes back out.
+ */
+import type { NebaWeekday } from '../types';
+/** Which unit the calendar is currently letting you pick. */
+export type CalendarView = 'day' | 'month' | 'year';
+/** How many years one page of the year grid holds. Four columns of three. */
+export declare const YEAR_PAGE_SIZE = 12;
+/**
+ * A local midnight on the given Y/M/D, with out-of-range parts normalised —
+ * month `12` rolls into January, day `0` into the last day of the month before.
+ *
+ * Built through `setFullYear` rather than `new Date(year, month, day)` because
+ * the two-argument constructor maps years 0–99 onto 1900–1999. Nobody is going
+ * to pick a date in the year 47, but a component that silently rewrites the year
+ * it was handed is a component that will eventually be blamed for something else.
+ */
+export declare function makeDate(year: number, month: number, day: number): Date;
+/** Is this a `Date` that stands for a real instant? `new Date('nope')` is not. */
+export declare function isValidDate(value: unknown): value is Date;
+/** The same day with the clock wound back to midnight. */
+export declare function startOfDay(date: Date): Date;
+/** The first day of the month this date is in, at midnight. */
+export declare function startOfMonth(date: Date): Date;
+/** How many days a month has, leap years included. */
+export declare function daysInMonth(year: number, month: number): number;
+/** Today, at midnight. The one place the pickers read the clock for a *date*. */
+export declare function today(): Date;
+export declare function addDays(date: Date, amount: number): Date;
+/**
+ * Months, with the day of the month clamped rather than allowed to overflow.
+ *
+ * 31 January plus one month is 28 February, not 3 March. The naive
+ * `setMonth(getMonth() + 1)` gives the second answer, which is why stepping a
+ * calendar forward from a 31st with it skips February entirely.
+ */
+export declare function addMonths(date: Date, amount: number): Date;
+export declare function addYears(date: Date, amount: number): Date;
+/** Negative, zero or positive, the way a sort comparator wants it. */
+export declare function compareDay(a: Date, b: Date): number;
+export declare function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean;
+export declare function isSameMonth(a: Date | null | undefined, b: Date | null | undefined): boolean;
+/** Strictly between the two ends, both of which are optional. */
+export declare function isDayInRange(date: Date, start: Date | null, end: Date | null): boolean;
+/** Holds a date inside `[min, max]`, at whatever precision the bounds carry. */
+export declare function clampDate(date: Date, min?: Date | null, max?: Date | null): Date;
+/**
+ * Is this calendar *day* outside the allowed span?
+ *
+ * Day-granular on purpose. A `maxDate` of 27 July at 09:00 still leaves the 27th
+ * pickable — the bound is about which days exist, and the time of day is the
+ * time picker's problem. `DateTimePicker` re-checks at full precision once an
+ * hour has been chosen.
+ */
+export declare function isDayOutside(date: Date, min?: Date | null, max?: Date | null): boolean;
+/** Minutes since local midnight — what `minTime`/`maxTime` are compared on. */
+export declare function minutesOfDay(date: Date): number;
+/** Seconds since local midnight, for the pickers that show a seconds column. */
+export declare function secondsOfDay(date: Date): number;
+/** Which column of a clock a candidate time is being offered for. */
+export type TimeUnit = 'hour' | 'minute' | 'second' | 'meridiem';
+/**
+ * The span of the day one row of one column covers, in seconds since midnight.
+ *
+ * This is the detail that separates a working time picker from a frustrating
+ * one. A bound has to be checked against the *span* a row stands for, not
+ * against one instant inside it: with a `minTime` of 09:30, the hour `9` covers
+ * 09:00:00–09:59:59, which overlaps what is allowed, so it stays available and
+ * the minute column is where `00` through `25` grey out. Comparing the whole
+ * candidate instead hides the 9 and makes half past nine unreachable.
+ */
+export declare function timeUnitSpan(unit: TimeUnit, at: Date): [number, number];
+/** The same instant with one or more clock fields replaced. */
+export declare function withTime(date: Date, parts: {
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+}): Date;
+/** `date`'s calendar day wearing `time`'s clock. */
+export declare function mergeDateAndTime(date: Date, time: Date): Date;
+/**
+ * Six weeks of seven days, always — including the leading and trailing days that
+ * belong to the neighbouring months.
+ *
+ * Six rows whatever the month, and that is the whole point. A February that
+ * starts on a Sunday needs four rows and a 31-day month starting on a Saturday
+ * needs six; a grid that renders only the rows it needs is a grid that changes
+ * height when you step a month forward, moving every cell out from under the
+ * pointer that just pressed one. The same reason Pagination pins its slot count.
+ */
+export declare function calendarWeeks(month: Date, weekStartsOn: NebaWeekday): Date[][];
+/** The first year on the page a given year falls on. 2026 → 2016 at 12 a page. */
+export declare function yearPageStart(year: number): number;
+/** A memoised `Intl.DateTimeFormat`. `undefined` locale means the runtime's own. */
+export declare function dateFormatter(locale: string | undefined, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
+/** Formats a date, tolerating the `null` a cleared picker holds. */
+export declare function formatDate(date: Date | null | undefined, locale: string | undefined, options: Intl.DateTimeFormatOptions): string;
+/**
+ * Every distinct string those instants format to. Deduplicated, because a
+ * date-only format collapses twenty-four of them into a handful.
+ */
+export declare function displaySamples(locale: string | undefined, options: Intl.DateTimeFormatOptions): string[];
+/**
+ * The samples plus the placeholder, when the placeholder is a string.
+ *
+ * An empty picker shows the placeholder, which can easily be longer than any
+ * date — "Pick a departure date" against "3 Aug 2026" — and a trigger that
+ * shrinks the moment the first date is chosen is the same jump from the other
+ * direction. A `ReactNode` placeholder is left out: there is nothing to measure
+ * without rendering it twice.
+ */
+export declare function withPlaceholder(samples: string[], placeholder: unknown): string[];
+/**
+ * The three machine-readable spellings, for the hidden input that makes a picker
+ * submit with a form.
+ *
+ * Local, not UTC, and that is the whole point: `toISOString()` on a `Date`
+ * standing for 27 July in Seoul gives `2026-07-26T15:00:00Z`, and a form field
+ * that quietly reports the day before the one on screen is the single most
+ * expensive bug a date picker can ship. The shapes are the ones the native
+ * `<input type="date">`, `type="time"` and `type="datetime-local"` submit, so a
+ * server that already parses those needs no new code.
+ */
+export declare function toISODate(date: Date): string;
+export declare function toISOTime(date: Date, withSeconds?: boolean): string;
+export declare function toISODateTime(date: Date, withSeconds?: boolean): string;
+/**
+ * The seven column headers, rotated so the first one is `weekStartsOn`.
+ *
+ * `short` rather than `narrow`: narrow gives `S`, `M`, `T`, `W`, `T`, `F`, `S`
+ * in English, where two pairs are indistinguishable. The full name goes on the
+ * header's `aria-label` so a screen reader hears "Monday" rather than "Mon".
+ */
+export declare function weekdayLabels(locale: string | undefined, weekStartsOn: NebaWeekday, weekday?: 'narrow' | 'short' | 'long'): string[];
+/** The twelve month names, January first, in the locale's own words. */
+export declare function monthLabels(locale: string | undefined, month?: 'short' | 'long'): string[];
+/**
+ * Does this locale write the month before the year?
+ *
+ * The calendar's header is two separate buttons — one that opens the month grid
+ * and one that opens the year grid — so it cannot just print what `Intl` gives
+ * it. Asking `formatToParts` which part came first is how the two buttons end up
+ * in the order the reader expects: `July 2026` in English, `2026년 7월` in
+ * Korean. Getting this wrong is subtle and reads as broken to exactly the people
+ * it is wrong for.
+ */
+export declare function isMonthBeforeYear(locale: string | undefined): boolean;
+/** Does this locale put a clock on a 12-hour dial? */
+export declare function isHour12(locale: string | undefined): boolean;
+/** What this locale calls AM and PM. */
+export declare function meridiemLabels(locale: string | undefined): [string, string];
+export declare function localeWeekStart(locale: string | undefined): NebaWeekday;

package/dist/internal/date.js

@@ -0,0 +1 @@
+export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,r){const n=new Date(0);return n.setFullYear(t,e,r),n.setHours(0,0,0,0),n}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}export function addDays(t,e){const r=new Date(t.getTime());return r.setDate(r.getDate()+e),r}export function addMonths(t,e){const r=t.getFullYear(),n=t.getMonth()+e,o=new Date(t.getTime()),a=makeDate(r,n,1);return o.setFullYear(a.getFullYear(),a.getMonth(),Math.min(t.getDate(),daysInMonth(a.getFullYear(),a.getMonth()))),o}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function isDayInRange(t,e,r){return!(!isValidDate(e)||!isValidDate(r))&&(compareDay(t,e)>0&&compareDay(t,r)<0)}export function clampDate(t,e,r){return isValidDate(e)&&t.getTime()<e.getTime()?new Date(e.getTime()):isValidDate(r)&&t.getTime()>r.getTime()?new Date(r.getTime()):t}export function isDayOutside(t,e,r){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(r)&&compareDay(t,r)>0}export function minutesOfDay(t){return 60*t.getHours()+t.getMinutes()}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const r=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(r/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(r/60);return[t,t+59]}if("second"===t)return[r,r];const n=e.getHours()<12?0:43200;return[n,n+43200-1]}export function withTime(t,e){const r=new Date(t.getTime());return r.setHours(e.hours??r.getHours(),e.minutes??r.getMinutes(),e.seconds??r.getSeconds(),0),r}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const r=startOfMonth(t),n=(r.getDay()-e+7)%7,o=addDays(r,-n);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,r)=>addDays(o,7*e+r)))}export function yearPageStart(t){return t-(t%12+12)%12}const t=new Map;export function dateFormatter(e,r){const n=`${e??""}\0${JSON.stringify(r)}`;let o=t.get(n);return o||(o=new Intl.DateTimeFormat(e,r),t.set(n,o)),o}export function formatDate(t,e,r){return isValidDate(t)?dateFormatter(e,r).format(t):""}const e=Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58));export function displaySamples(t,r){const n=dateFormatter(t,r);return[...new Set(e.map(t=>n.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const e=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${e(t.getMonth()+1)}-${e(t.getDate())}`}export function toISOTime(t,e=!1){const r=t=>String(t).padStart(2,"0"),n=`${r(t.getHours())}:${r(t.getMinutes())}`;return e?`${n}:${r(t.getSeconds())}`:n}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const r=makeDate(2021,7,1);export function weekdayLabels(t,e,n="short"){const o=dateFormatter(t,{weekday:n});return Array.from({length:7},(t,n)=>o.format(addDays(r,(e+n)%7)))}export function monthLabels(t,e="short"){const r=dateFormatter(t,{month:e});return Array.from({length:12},(t,e)=>r.format(makeDate(2021,e,1)))}export function isMonthBeforeYear(t){const e=dateFormatter(t,{year:"numeric",month:"long"}).formatToParts(r);return e.findIndex(t=>"month"===t.type)<e.findIndex(t=>"year"===t.type)}export function isHour12(t){const e=dateFormatter(t,{hour:"numeric"}).resolvedOptions();return e.hourCycle?"h11"===e.hourCycle||"h12"===e.hourCycle:!0===e.hour12}export function meridiemLabels(t){const e=dateFormatter(t,{hour:"numeric",hour12:!0}),n=t=>{const n=e.formatToParts(withTime(r,{hours:t})).find(t=>"dayPeriod"===t.type);return n?.value??(t<12?"AM":"PM")};return[n(9),n(21)]}export function localeWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,r=new Intl.Locale(e),n="function"==typeof r.getWeekInfo?r.getWeekInfo():r.weekInfo;if("number"==typeof n?.firstDay)return n.firstDay%7}catch{}return 0}

package/dist/internal/grid.d.ts

@@ -0,0 +1,69 @@
+/**
+ * The arithmetic and the vocabulary the three layout components share.
+ *
+ * Like `internal/styles.ts` this is the library talking to itself, and it lives
+ * here rather than in either component's folder for the same reason
+ * `internal/button-group.ts` does: `GridContainer` and `Grid` are one system in
+ * two elements, and neither should have to import the other.
+ *
+ * What is *not* here is the layout itself. A column width is
+ * `(100% + gap) * span / columns - gap`, it has to change at four breakpoints,
+ * and it is the width of an element whose column count is declared on its
+ * parent — none of which Tailwind can spell, because Tailwind only ever sees
+ * class names written out literally and `columns` is a number a caller picks.
+ * So the widths are real CSS in `styles.css`, driven by the `--n-*` slots this
+ * file generates. That is the same split the rest of the library makes: per-
+ * instance values go in inline custom properties, never in class names.
+ */
+import type * as React from 'react';
+import type { NebaAlignItems, NebaAlignSelf, NebaBreakpoint, NebaJustifyContent, NebaResponsive } from '../types';
+/** Smallest first, which is also the order the media queries have to be in. */
+export declare const breakpoints: readonly NebaBreakpoint[];
+/**
+ * Turns a responsive value into the `--n-{name}-{breakpoint}` slots the CSS
+ * reads, emitting only the breakpoints the caller actually named.
+ *
+ * The gaps are filled in by CSS rather than here: each breakpoint's rule falls
+ * back through the ones below it, so `{ md: 6 }` needs one slot and not five.
+ * That keeps the inline style on a grid item down to what was asked for.
+ */
+export declare function responsiveSlots<T>(name: string, value: NebaResponsive<T> | undefined, toCss: (value: T) => string): React.CSSProperties;
+/**
+ * Fills in the `xs` entry of a partial map with the prop's own default.
+ *
+ * Without this, `spacing={{ md: 4 }}` would be a grid with no gutter at all
+ * below 48rem — the CSS fallback rather than the documented default of 2 — and
+ * a caller who narrowed one breakpoint would silently lose every other one. A
+ * map says "from here up, use this instead"; it does not say "and nothing
+ * below".
+ */
+export declare function withBaseline<T>(value: NebaResponsive<T> | undefined, baseline: T): NebaResponsive<T>;
+/**
+ * A count of columns, as a plain number for `calc()` to divide by.
+ *
+ * Rounded and floored at 1 because the value ends up as a divisor: a grid of
+ * 2.5 columns is not a thing anyone meant, and a grid of 0 is a division by
+ * zero that would take the width declaration down with it.
+ */
+export declare function columnCount(value: number): string;
+/** A span or an offset. Same rounding; an offset of 0 is meaningful. */
+export declare function columnUnits(value: number, min: number): string;
+export declare const spanValue: (value: number) => string;
+export declare const offsetValue: (value: number) => string;
+/**
+ * A gutter, as a length.
+ *
+ * Fractions are the point — `spacing={1.5}` is `0.375rem`, the same step
+ * `gap-1.5` is — so the multiplication is rounded to five places rather than
+ * left to print `0.30000000000000004rem` into the DOM.
+ */
+export declare function spacingValue(units: number): string;
+export declare const justifyContentClasses: Record<NebaJustifyContent, string>;
+export declare const alignItemsClasses: Record<NebaAlignItems, string>;
+/**
+ * Where the *rows* sit when the grid is shorter than the box holding it. Only
+ * ever visible on a container with a height of its own, which is why it takes
+ * the full distribution vocabulary and `alignItems` does not.
+ */
+export declare const alignContentClasses: Record<NebaJustifyContent, string>;
+export declare const alignSelfClasses: Record<NebaAlignSelf, string>;

package/dist/internal/grid.js

@@ -0,0 +1 @@
+export const breakpoints=["xs","sm","md","lg","xl"];export function responsiveSlots(t,e,n){const s=function(t){return null==t?{}:"object"==typeof t?t:{xs:t}}(e),o={};for(const e of breakpoints){const r=s[e];void 0!==r&&(o[`--n-${t}-${e}`]=n(r))}return o}export function withBaseline(t,e){return null==t?e:"object"==typeof t?{xs:e,...t}:t}export function columnCount(t){return String(Math.max(1,Math.round(t)))}export function columnUnits(t,e){return String(Math.max(e,Math.round(t)))}export const spanValue=t=>columnUnits(t,1);export const offsetValue=t=>columnUnits(t,0);export function spacingValue(t){const e=.25*Math.max(0,t);return`${Number(e.toFixed(5))}rem`}export const justifyContentClasses={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly",stretch:"justify-stretch"};export const alignItemsClasses={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"};export const alignContentClasses={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"};export const alignSelfClasses={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};

package/dist/internal/icons.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import type { NebaColor } from '../types';
+/**
+ * The glyphs more than one component draws.
+ *
+ * All of them are 16×16 with a 1.5px stroke and no fill except where a dot is
+ * meant to read as solid, and none of them carries a size: `iconClasses` in
+ * `styles.ts` sizes every icon in `em`, so one drawing serves every step of the
+ * scale.
+ *
+ * They live here rather than in the components for the ordinary reason — the ×
+ * on a Chip, an Alert, a Dialog and a Toast is one × — and for one that matters
+ * more: the severity set is a piece of the design language. An alert that says
+ * "this went wrong" only in red says it only to some readers, so the shape has
+ * to carry the meaning too, and that only holds if every component uses the
+ * same shape for the same family.
+ */
+export declare function CloseIcon(): React.JSX.Element;
+/**
+ * The disclosure chevron, drawn pointing **down**.
+ *
+ * One drawing for every direction: a Select's trigger, an Accordion's header, a
+ * submenu's arrow and a Pagination's steppers all want the same wedge turned a
+ * different way, and turning it is the one allowance the no-transform rule
+ * makes — a glyph has no text in it to resample.
+ */
+export declare function ChevronIcon(): React.JSX.Element;
+/** The tick: a chosen option, a ticked menu item. */
+export declare function CheckIcon(): React.JSX.Element;
+/**
+ * The two steppers, and the `+` that offers a value the list does not have.
+ *
+ * They are a pair and stay one: a minus drawn to a different weight from the
+ * plus beside it reads as two toolkits in one control. NumberField draws both;
+ * Combobox draws the plus on its "add this" row.
+ */
+export declare function MinusIcon(): React.JSX.Element;
+export declare function PlusIcon(): React.JSX.Element;
+/**
+ * The two trend arrows a comparison draws.
+ *
+ * A pair, and they stay one: an arrow that rises at a different angle from the
+ * one that falls beside it reads as two toolkits in one report. Statistic draws
+ * both, and reaches for `MinusIcon` above when a figure has not moved — the
+ * third state of a comparison is genuinely the absence of an arrow.
+ *
+ * The shape carries the meaning for the same reason the severity set does: a
+ * delta that says "down" only in red says it only to some readers.
+ */
+export declare function TrendUpIcon(): React.JSX.Element;
+export declare function TrendDownIcon(): React.JSX.Element;
+/**
+ * The two glyphs a picker's trigger wears.
+ *
+ * They are a pair in the same sense the steppers are: a DateTimePicker draws
+ * only the calendar, because a control cannot say two things at once and the
+ * date is the part you scan for. Drawn on the same 16×16 grid at the same
+ * weight, so a row of a DatePicker and a TimePicker does not look like two
+ * icon sets pushed together.
+ */
+export declare function CalendarIcon(): React.JSX.Element;
+export declare function ClockIcon(): React.JSX.Element;
+/**
+ * The arrow between the two ends of a range.
+ *
+ * Drawn pointing right and turned under RTL by the component, for the same
+ * reason the chevron is: it is a glyph, and there is no text in it to resample.
+ */
+export declare function ArrowRightIcon(): React.JSX.Element;
+/** The filled dot: the chosen one of a set, where a tick would say "and". */
+export declare function DotIcon(): React.JSX.Element;
+/**
+ * One drawing per colour family.
+ *
+ * `primary` and `secondary` have no severity to draw, so they take the note the
+ * informational one uses — three shapes for six families, because the three
+ * that mean something are the three worth telling apart.
+ */
+export declare const severityIcons: Record<NebaColor, React.ReactNode>;

package/dist/internal/icons.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as e}from"react/jsx-runtime";export function CloseIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m4.5 4.5 7 7m0-7-7 7",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function ChevronIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m4.5 6.5 3.5 3.5 3.5-3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export function CheckIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m3.5 8.5 3 3 6-6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})})}export function MinusIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M3.5 8h9",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function PlusIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M8 3.5v9M3.5 8h9",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function TrendUpIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M3 11 6.5 7.5 9 10l4-4",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),r("path",{d:"M9.5 6h3.5v3.5",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}export function TrendDownIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M3 5 6.5 8.5 9 6l4 4",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),r("path",{d:"M9.5 10h3.5V6.5",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}export function CalendarIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("rect",{x:"2",y:"3.25",width:"12",height:"10.75",rx:"2",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M2 6.75h12",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M5.25 1.75v2.5M10.75 1.75v2.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function ClockIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M8 4.5V8l2.4 1.6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}export function ArrowRightIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M3 8h10m-3.5-3.5L13 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export function DotIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("circle",{cx:"8",cy:"8",r:"3.25",fill:"currentColor"})})}function o(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M8 7.25v4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("circle",{cx:"8",cy:"4.9",r:"0.85",fill:"currentColor"})]})}export const severityIcons={primary:r(o,{}),secondary:r(o,{}),info:r(o,{}),success:e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"m5.25 8.25 1.9 1.9 3.6-3.9",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),warning:e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M7.13 2.6 1.9 11.7a1 1 0 0 0 .87 1.5h10.46a1 1 0 0 0 .87-1.5L8.87 2.6a1 1 0 0 0-1.74 0Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"}),r("path",{d:"M8 6.1v3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("circle",{cx:"8",cy:"11.2",r:"0.85",fill:"currentColor"})]}),danger:e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"m5.9 5.9 4.2 4.2m0-4.2-4.2 4.2",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})};

package/dist/internal/menu.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { NebaColor, NebaDensity, NebaSize } from '../types';
+/**
+ * What a menu item inherits from the menu around it.
+ *
+ * The same arrangement `ButtonGroup` uses, and for the same reason: `size`,
+ * `color` and `density` are properties of the *menu*, not of any one row in it,
+ * and passing them per item would be three chances per row to get one wrong —
+ * with a silent failure, a menu where the fourth item is a size bigger.
+ *
+ * It lives in `internal/` rather than in `Menu.tsx` because a submenu is a menu
+ * inside a menu and a context menu is the same rows hung off a right-click, so
+ * three components read this and none of them should have to import the others.
+ */
+export interface MenuContextValue {
+    size: NebaSize;
+    color: NebaColor;
+    density: NebaDensity;
+}
+export declare const MenuContext: React.Context<MenuContextValue>;

package/dist/internal/menu.js

@@ -0,0 +1 @@
+import*as t from"react";export const MenuContext=t.createContext({size:"md",color:"primary",density:"default"});

package/dist/internal/picker.d.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import type { PickerLabels } from './calendar';
+import type { NebaColor, NebaElevation, NebaSize, NebaStyleProps } from '../types';
+/**
+ * The shell all four pickers wear: a field-shaped trigger with a popup hanging
+ * off it.
+ *
+ * It is here rather than in one of the components for the reason the calendar
+ * is: four components need it, and none of them should have to import another.
+ * What it draws is deliberately not new — the trigger is `fieldRestClasses`,
+ * which is the same box a TextField and a Select's trigger are drawn on, to the
+ * pixel. A form where the date field is a different height, radius or colour
+ * from the text field beside it is a form that looks assembled rather than
+ * designed.
+ *
+ * The one thing the pickers do *not* offer is typing a date into the trigger.
+ * Parsing a date out of free text is locale-dependent in a way that cannot be
+ * done honestly without a date library, and a field that understands `27/7/26`
+ * in one browser and not the next is worse than one that never claimed to. So
+ * the trigger is a button, exactly as a Select's is, and the calendar is where
+ * the answer comes from.
+ */
+/**
+ * The popup's slots: a container's undyed sheet with the *control* fill added
+ * back on top.
+ *
+ * Neither generator in `internal/styles` says this on its own, and the reason is
+ * that a picker's popup is both things at once. It is a container — it holds a
+ * grid of forty-two days, and dyeing the sheet under them would put every one of
+ * them on a background it was not chosen against — and it also holds the one
+ * filled token in the library that has to be legible without being read, which
+ * is the day you picked. So the sheet stays white and the family arrives in the
+ * four fill slots the chosen cell reads.
+ */
+export declare function popupSlots(color: NebaColor, elevation: NebaElevation): React.CSSProperties;
+/**
+ * The popup. Like every floating surface in the library it carries a shadow by
+ * default, at level 3 — as far as the scale goes without hovering — because it
+ * is genuinely off the page rather than merely on top of it.
+ */
+export declare const pickerPopupClasses: string;
+/** The popup's own padding, one track tighter than a control's. */
+export declare const popupPaddingClasses: Record<NebaSize, string>;
+export interface PickerShellProps extends NebaStyleProps {
+    elevation?: NebaElevation;
+    /** Label above the trigger. */
+    label?: React.ReactNode;
+    /** Helper text below it. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the control invalid. */
+    error?: React.ReactNode;
+    invalid?: boolean;
+    /** The glyph before the value — a calendar or a clock. */
+    startIcon?: React.ReactNode;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface InternalShellProps extends PickerShellProps {
+    /** What the trigger reads. A placeholder when `empty`. */
+    display: React.ReactNode;
+    /**
+     * Every string the display could hold, so the trigger stops changing width
+     * with its value. `displaySamples` in `internal/date` produces them and
+     * `WidthSizer` is what lays them out.
+     */
+    samples?: string[];
+    /** Nothing has been chosen yet, so the display is muted. */
+    empty: boolean;
+    /** Offers the × that empties the control. */
+    clearable?: boolean;
+    onClear: () => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    labels: PickerLabels;
+    /** `<input type="hidden">` rows, so the control submits with a form. */
+    hiddenValues?: Array<{
+        name: string;
+        value: string;
+    }>;
+    /** How far off the trigger the popup sits. */
+    sideOffset?: number;
+    children: React.ReactNode;
+    triggerRef?: React.Ref<HTMLButtonElement>;
+}
+/**
+ * A trigger, a label, the two lines of text under it, and a popup.
+ *
+ * Everything about it that is visible is a decision already made elsewhere: the
+ * shell classes, the read-only and disabled treatments, the label's type scale
+ * and the way `invalid` re-points the whole colour family at `danger` so the
+ * edge, the ring and the message turn over together.
+ */
+export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, sideOffset, children, triggerRef }: InternalShellProps): React.JSX.Element;
+/**
+ * The row of shortcuts under a picker's panel.
+ *
+ * A hairline above it rather than a gap, because the actions act on the panel
+ * and a gap would read as a second popup stacked under the first.
+ */
+export declare function PickerFooter({ size, children }: {
+    size: NebaSize;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** The vertical hairline between a calendar and the clock beside it. */
+export declare function PickerDivider(): React.JSX.Element;
+export {};

package/dist/internal/picker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Field as i}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{CloseIcon as l}from"./icons";import{WidthSizer as r}from"./sizer";import{chipRemoveClasses as o,controlHeightClasses as s,controlTextLeadingClasses as d,cx as c,disabledClasses as p,fieldReadOnlyClasses as u,fieldRestClasses as m,focusWithinRingClasses as f,gapClasses as b,iconClasses as h,metaTextClasses as x,paddingXClasses as g,radiusClasses as v,stackGapClasses as y,surfaceClasses as N,surfaceSlots as w,transitionClasses as P}from"./styles";export function popupSlots(e,n){return{...w(e,n),"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`}}const k=["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",P,"focus-within:[transition-duration:0ms]",f,h].join(" ");export const pickerPopupClasses=[N,"border bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:f="outline",size:h="md",color:N="primary",density:P="default",elevation:C=0,label:$,description:j,error:O,invalid:z,startIcon:F,fullWidth:R=!1,disabled:S=!1,readOnly:q=!1,required:D=!1,id:I,className:_,style:B,display:E,samples:L,empty:T,clearable:V=!1,onClear:W,open:A,onOpenChange:G,labels:H,hiddenValues:J,sideOffset:K=6,children:M,triggerRef:Q}){const U=a.useId(),X=I??`${U}-trigger`,Y=`${U}-label`,Z=`${U}-description`,ee=`${U}-error`,ne=null!=O&&!1!==O&&""!==O,ae=z??ne,ie=ae?"danger":N,te=S||q,le=[j?Z:null,ne?ee:null].filter(Boolean).join(" ")||void 0;return n(i.Root,{disabled:S,invalid:ae,className:c("flex-col align-top",y[h],R?"flex w-full":"inline-flex",_),style:{...w(ie,C),...B},children:[$?e(i.Label,{id:Y,htmlFor:X,className:c(x[h],"font-medium",S?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:$}):null,n(t.Root,{open:A,onOpenChange:e=>G(e),children:[n("span",{className:c(k,s[h],d[h],v[h],b[h],g[P][h],S?p[f]:q?u[f]:m[f]),children:[n(t.Trigger,{id:X,ref:Q,disabled:S,"aria-labelledby":$?Y:void 0,"aria-describedby":le,"aria-required":D||void 0,"aria-invalid":ae||void 0,className:c("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",b[h],"[outline:none]",te?"cursor-default":"cursor-pointer"),children:[F?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)",children:F}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:c("w-full truncate",T?"text-(--neba-muted-fg)":"text-(--neba-fg)"),children:E}),e(r,{samples:L??[]})]})]}),!V||T||te?null:e("button",{type:"button","aria-label":H.clear,className:c(o,"text-(--neba-muted-fg)"),onClick:e=>{e.stopPropagation(),W()},children:e(l,{})})]}),e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:K,align:"start",children:e(t.Popup,{initialFocus:!1,className:c(pickerPopupClasses,v[h],popupPaddingClasses[h],d[h]),style:popupSlots(ie,3),children:M})})})]}),j?e(i.Description,{id:Z,className:c(x[h],"text-(--neba-muted-fg)"),children:j}):null,ne?e(i.Error,{id:ee,match:!0,className:c(x[h],"text-(--n-accent)"),children:O}):null,J?.map((n,a)=>e("input",{type:"hidden",name:n.name,value:n.value},a))]})}export function PickerFooter({size:n,children:a}){return e("div",{className:c("flex items-center justify-end border-t pt-1.5","[border-color:var(--n-line)]",b[n]),children:a})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--n-line)"})}