neba 1.0.0 → 1.2.0

package/dist/internal/calendar.d.ts

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { type TimeUnit } from './date';
+import type { NebaColor, NebaDensity, NebaSize, NebaWeekday } from '../types';
+/**
+ * The calendar grid and the clock columns, written once for the four pickers.
+ *
+ * They live in `internal/` for the reason `button-group.ts` does: a
+ * DateTimePicker is a DatePicker and a TimePicker in one popup, and a
+ * DateRangePicker is two calendars, so three components need this and none of
+ * them should have to import another. The one thing it reaches *up* for is
+ * `Button` — the header's steppers are buttons, they are not a new kind of
+ * control, and Pagination already makes that argument. Nothing here is exported
+ * from `src/index.ts`.
+ *
+ * The day cells are deliberately *not* Buttons. A cell has states a Button has
+ * no vocabulary for — inside a range, at the end of a range, today, belonging to
+ * the month next door — and four of them have to be told apart at a glance in a
+ * grid of forty-two.
+ */
+/**
+ * Every string a picker says that is not a date.
+ *
+ * One object rather than eighteen props. These are a set: a caller who has to
+ * translate "Previous month" has to translate "Next month" in the same breath,
+ * and a component with eighteen `*Label` props is a component whose signature is
+ * mostly apology. The dates themselves are never in here — those come from
+ * `Intl`, which already knows what July is called in more languages than this
+ * file ever will.
+ */
+export interface PickerLabels {
+    /** The calendar's steppers, in day view. */
+    previousMonth: string;
+    nextMonth: string;
+    /** The same steppers in month view, where they move by a year. */
+    previousYear: string;
+    nextYear: string;
+    /** And in year view, where they move by a page of twelve. */
+    previousYears: string;
+    nextYears: string;
+    /** The two header buttons that open the month grid and the year grid. */
+    chooseMonth: string;
+    chooseYear: string;
+    /** The footer's actions. */
+    today: string;
+    now: string;
+    clear: string;
+    done: string;
+    /** The clock's columns. */
+    hour: string;
+    minute: string;
+    second: string;
+    meridiem: string;
+    /** Which end of a range the calendar is currently asking for. */
+    start: string;
+    end: string;
+}
+export declare const defaultPickerLabels: PickerLabels;
+/** Merges a caller's overrides over the defaults, once per render. */
+export declare function usePickerLabels(overrides?: Partial<PickerLabels>): PickerLabels;
+export interface CalendarProps {
+    size: NebaSize;
+    color: NebaColor;
+    locale?: string;
+    weekStartsOn: NebaWeekday;
+    /** The month on screen. Controlled, so two panels can be kept a month apart. */
+    month: Date;
+    onMonthChange: (month: Date) => void;
+    /** The days drawn filled — one for a single picker, up to two for a range. */
+    selected: readonly (Date | null | undefined)[];
+    /** The two ends the band is drawn between. Both `null` outside range mode. */
+    rangeStart?: Date | null;
+    rangeEnd?: Date | null;
+    onSelect: (date: Date) => void;
+    /** The day under the pointer, for a range that is only half chosen. */
+    onPreviewChange?: (date: Date | null) => void;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * Draws the leading and trailing days that belong to the neighbouring months.
+     *
+     * On by default, because clicking the 1st of next month from this month's
+     * panel is a real shortcut. A two-month range picker turns it *off*, and not
+     * as a matter of taste: with both panels showing six full weeks, the 1st of
+     * August appears twice — once as a trailing day of July and once as itself —
+     * and two cells with the same name in the same popup is ambiguous to a pointer
+     * and outright broken to a screen reader.
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /** Takes the focus on mount — the popup has just opened. */
+    autoFocus?: boolean;
+    showPreviousButton?: boolean;
+    showNextButton?: boolean;
+    labels: PickerLabels;
+    className?: string;
+}
+/**
+ * One month, with a way to reach every other one.
+ *
+ * Three views on the same footprint: the days of a month, the twelve months of a
+ * year, twelve years at a time. They are deliberately the same width *and* the
+ * same height — the day view is seven rows counting its header, and the other
+ * two stretch four rows and three rows across that same height — so switching
+ * view never resizes the popup under the pointer that opened it.
+ *
+ * Arrow keys move by one cell, `PageUp`/`PageDown` by a month (a year with
+ * Shift), `Home`/`End` to the ends of the week, and running off an edge steps
+ * the calendar rather than stopping. One roving tab stop, so `Tab` leaves the
+ * grid instead of walking forty-two cells — the pattern the ARIA date-picker
+ * practice describes, and the reason none of the cells is a `disabled` button.
+ */
+export declare function Calendar({ size, color, locale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, showPreviousButton, showNextButton, labels, className }: CalendarProps): React.JSX.Element;
+export type { TimeUnit };
+export interface TimeGridProps {
+    size: NebaSize;
+    density: NebaDensity;
+    locale?: string;
+    /** The time on screen, or `null` while nothing has been chosen. */
+    value: Date | null;
+    /** The day the columns write into while `value` is still `null`. */
+    referenceDate: Date;
+    onChange: (value: Date) => void;
+    /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
+    hour12: boolean;
+    showSeconds: boolean;
+    hourStep: number;
+    minuteStep: number;
+    secondStep: number;
+    shouldDisableTime?: (value: Date, unit: TimeUnit) => boolean;
+    /** Takes the focus on mount — the popup has just opened. */
+    autoFocus?: boolean;
+    labels: PickerLabels;
+    className?: string;
+}
+/**
+ * Hours, minutes and — when asked for — seconds, as columns you scroll rather
+ * than as a dial you drag.
+ *
+ * Columns because they are the shape that answers what a time picker is actually
+ * asked: "half past nine" is two glances, and "any time at all, on the hour" is
+ * a column you never touch. A clock face is prettier and needs a `transform` to
+ * read, which this library does not have.
+ *
+ * The chosen row in each column is scrolled into view once, on open. That is the
+ * only imperative work here and it is not optional: a column of sixty minutes
+ * that opens at `00` while the value is `45` has hidden its own answer.
+ */
+export declare function TimeGrid({ size, density, locale, value, referenceDate, onChange, hour12, showSeconds, hourStep, minuteStep, secondStep, shouldDisableTime, autoFocus, labels, className }: TimeGridProps): React.JSX.Element;

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/i18n.d.ts

@@ -0,0 +1,78 @@
+/**
+ * The words the library says on its own behalf.
+ *
+ * Almost nothing in Neba writes text a reader sees — a Button says whatever it
+ * was handed, a Card's title is the caller's. The exceptions are the strings a
+ * component has to invent because there is nowhere else for them to come from:
+ * the sentence behind a link that opens a new tab, the label on the button that
+ * uncovers a Spoiler, the word under a chat message that says it was read.
+ *
+ * Those are collected here rather than defaulted inside each component, for the
+ * reason every other table in `internal/` exists: they are a set. A product in
+ * Korean does not want eight components each defaulting to English and each
+ * needing its own override prop, and the next component that needs a word —
+ * a picker's "Today", a Pagination's "Next page" — should get it from the same
+ * place rather than starting a second table beside this one.
+ *
+ * What is *not* in here is anything `Intl` already knows. Month names, weekday
+ * names, AM/PM and number formats come from the platform, which speaks more
+ * languages than this file ever will. This is only for the words the platform
+ * has no opinion about.
+ *
+ * Every component that reads this takes a `locale` and an override prop for the
+ * string itself, so an unsupported language is never a dead end: `locale` gets
+ * you a translation for free, and the prop gets you one for anything else.
+ */
+/**
+ * One namespace per component, rather than one flat list of keys.
+ *
+ * A namespace is what makes a partial translation possible: a locale supplies
+ * whatever it has and the rest falls back to English one namespace at a time,
+ * so adding a namespace here does not silently blank the strings in every
+ * language that has not caught up with it yet.
+ */
+export interface NebaMessages {
+    /** TextLink. */
+    link: {
+        /**
+         * What is read out after a link that opens a new tab, and never drawn. A
+         * window changing under the reader is the one thing about a link that is
+         * invisible until it has already happened.
+         */
+        newTab: string;
+    };
+    /** Spoiler. */
+    spoiler: {
+        /** The button that uncovers the content. */
+        reveal: string;
+        /** And the one that covers it again, when the Spoiler is reversible. */
+        hide: string;
+        /** The line above the button, saying why the content is covered. */
+        notice: string;
+    };
+    /** ChatBubble. */
+    chat: {
+        /** The four steps a message goes through, as the mark under it. */
+        sending: string;
+        sent: string;
+        delivered: string;
+        read: string;
+        /** And the fifth, which is not a step: it did not go. */
+        failed: string;
+        /** What the three dots mean. */
+        typing: string;
+    };
+}
+/**
+ * The strings for a locale, merged over English.
+ *
+ * `undefined` is English rather than the runtime's own locale, and that is
+ * deliberate: `navigator.language` differs between the server that renders the
+ * markup and the browser that hydrates it, and text that changes between those
+ * two is a hydration mismatch in the one part of the page a reader is looking
+ * at. A component that should follow the reader is told which language to
+ * follow.
+ */
+export declare function resolveMessages(locale?: string): NebaMessages;
+/** The same, as a hook, for the components that read it during a render. */
+export declare function useMessages(locale?: string): NebaMessages;

package/dist/internal/i18n.js

@@ -0,0 +1 @@
+import*as e from"react";const n={link:{newTab:"(opens in a new tab)"},spoiler:{reveal:"Reveal",hide:"Hide",notice:"This may contain spoilers"},chat:{sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not sent",typing:"Typing…"}},i={ko:{link:{newTab:"(새 창에서 열림)"},spoiler:{reveal:"내용 보기",hide:"숨기기",notice:"스포일러가 포함되어 있을 수 있습니다"},chat:{sending:"보내는 중",sent:"보냄",delivered:"전달됨",read:"읽음",failed:"전송 실패",typing:"입력 중…"}},ja:{link:{newTab:"(新しいタブで開きます)"},spoiler:{reveal:"表示する",hide:"隠す",notice:"ネタバレを含む可能性があります"},chat:{sending:"送信中",sent:"送信済み",delivered:"配信済み",read:"既読",failed:"送信できませんでした",typing:"入力中…"}},"zh-hans":{link:{newTab:"(在新标签页中打开)"},spoiler:{reveal:"显示内容",hide:"隐藏",notice:"此内容可能包含剧透"},chat:{sending:"发送中",sent:"已发送",delivered:"已送达",read:"已读",failed:"发送失败",typing:"正在输入…"}},"zh-hant":{link:{newTab:"(在新分頁中開啟)"},spoiler:{reveal:"顯示內容",hide:"隱藏",notice:"此內容可能包含劇透"},chat:{sending:"傳送中",sent:"已傳送",delivered:"已送達",read:"已讀",failed:"傳送失敗",typing:"正在輸入…"}},es:{link:{newTab:"(se abre en una pestaña nueva)"},spoiler:{reveal:"Mostrar",hide:"Ocultar",notice:"Puede contener spoilers"},chat:{sending:"Enviando",sent:"Enviado",delivered:"Entregado",read:"Leído",failed:"No enviado",typing:"Escribiendo…"}},pt:{link:{newTab:"(abre em uma nova aba)"},spoiler:{reveal:"Mostrar",hide:"Ocultar",notice:"Pode conter spoilers"},chat:{sending:"Enviando",sent:"Enviado",delivered:"Entregue",read:"Lido",failed:"Não enviado",typing:"Digitando…"}},fr:{link:{newTab:"(s’ouvre dans un nouvel onglet)"},spoiler:{reveal:"Afficher",hide:"Masquer",notice:"Peut contenir des spoilers"},chat:{sending:"Envoi en cours",sent:"Envoyé",delivered:"Distribué",read:"Lu",failed:"Non envoyé",typing:"En train d’écrire…"}},de:{link:{newTab:"(wird in einem neuen Tab geöffnet)"},spoiler:{reveal:"Anzeigen",hide:"Ausblenden",notice:"Kann Spoiler enthalten"},chat:{sending:"Wird gesendet",sent:"Gesendet",delivered:"Zugestellt",read:"Gelesen",failed:"Nicht gesendet",typing:"Schreibt…"}},it:{link:{newTab:"(si apre in una nuova scheda)"},spoiler:{reveal:"Mostra",hide:"Nascondi",notice:"Può contenere spoiler"},chat:{sending:"Invio in corso",sent:"Inviato",delivered:"Consegnato",read:"Letto",failed:"Non inviato",typing:"Sta scrivendo…"}},nl:{link:{newTab:"(opent in een nieuw tabblad)"},spoiler:{reveal:"Tonen",hide:"Verbergen",notice:"Kan spoilers bevatten"},chat:{sending:"Wordt verzonden",sent:"Verzonden",delivered:"Afgeleverd",read:"Gelezen",failed:"Niet verzonden",typing:"Aan het typen…"}},pl:{link:{newTab:"(otwiera się w nowej karcie)"},spoiler:{reveal:"Pokaż",hide:"Ukryj",notice:"Może zawierać spoilery"},chat:{sending:"Wysyłanie",sent:"Wysłano",delivered:"Dostarczono",read:"Przeczytano",failed:"Nie wysłano",typing:"Pisze…"}},ru:{link:{newTab:"(откроется в новой вкладке)"},spoiler:{reveal:"Показать",hide:"Скрыть",notice:"Может содержать спойлеры"},chat:{sending:"Отправляется",sent:"Отправлено",delivered:"Доставлено",read:"Прочитано",failed:"Не отправлено",typing:"Печатает…"}},tr:{link:{newTab:"(yeni sekmede açılır)"},spoiler:{reveal:"Göster",hide:"Gizle",notice:"Spoiler içerebilir"},chat:{sending:"Gönderiliyor",sent:"Gönderildi",delivered:"İletildi",read:"Okundu",failed:"Gönderilemedi",typing:"Yazıyor…"}},ar:{link:{newTab:"(يفتح في علامة تبويب جديدة)"},spoiler:{reveal:"إظهار",hide:"إخفاء",notice:"قد يحتوي على حرق للأحداث"},chat:{sending:"جارٍ الإرسال",sent:"تم الإرسال",delivered:"تم التسليم",read:"تمت القراءة",failed:"لم يتم الإرسال",typing:"يكتب الآن…"}},hi:{link:{newTab:"(नए टैब में खुलता है)"},spoiler:{reveal:"दिखाएँ",hide:"छिपाएँ",notice:"इसमें स्पॉइलर हो सकते हैं"},chat:{sending:"भेजा जा रहा है",sent:"भेजा गया",delivered:"डिलीवर हुआ",read:"पढ़ा गया",failed:"नहीं भेजा गया",typing:"टाइप कर रहे हैं…"}},id:{link:{newTab:"(terbuka di tab baru)"},spoiler:{reveal:"Tampilkan",hide:"Sembunyikan",notice:"Mungkin mengandung spoiler"},chat:{sending:"Mengirim",sent:"Terkirim",delivered:"Diterima",read:"Dibaca",failed:"Gagal terkirim",typing:"Sedang mengetik…"}},vi:{link:{newTab:"(mở trong tab mới)"},spoiler:{reveal:"Hiện nội dung",hide:"Ẩn",notice:"Có thể chứa nội dung tiết lộ"},chat:{sending:"Đang gửi",sent:"Đã gửi",delivered:"Đã nhận",read:"Đã xem",failed:"Chưa gửi được",typing:"Đang nhập…"}},th:{link:{newTab:"(เปิดในแท็บใหม่)"},spoiler:{reveal:"แสดงเนื้อหา",hide:"ซ่อน",notice:"อาจมีการเปิดเผยเนื้อหา"},chat:{sending:"กำลังส่ง",sent:"ส่งแล้ว",delivered:"ส่งถึงแล้ว",read:"อ่านแล้ว",failed:"ส่งไม่สำเร็จ",typing:"กำลังพิมพ์…"}}},a={zh:"zh-hans","zh-cn":"zh-hans","zh-my":"zh-hans","zh-sg":"zh-hans","zh-hk":"zh-hant","zh-mo":"zh-hant","zh-tw":"zh-hant"};const t=new Map([["",n]]);export function resolveMessages(e){const r=e?.trim()??"",d=t.get(r);if(d)return d;const l=function(e){const n=e.toLowerCase().split(/[-_]/).filter(Boolean),i=n[0];if(!i)return[];const a=n.slice(1),t=a.find(e=>/^[a-z]{4}$/.test(e)),r=a.find(e=>/^([a-z]{2}|\d{3})$/.test(e));return[t?`${i}-${t}`:"",r?`${i}-${r}`:"",i].filter(Boolean)}(r).map(e=>i[e]??i[a[e]??""]).find(Boolean),o=l?{link:{...n.link,...l.link},spoiler:{...n.spoiler,...l.spoiler},chat:{...n.chat,...l.chat}}:n;return t.set(r,o),o}export function useMessages(n){return e.useMemo(()=>resolveMessages(n),[n])}

package/dist/internal/icons.d.ts

@@ -36,6 +36,60 @@ export declare function CheckIcon(): React.JSX.Element;
  */
 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 two marks a link wears.
+ *
+ * A pair for the same reason the steppers are: they answer the same question —
+ * "where does this go" — and a chain drawn at one weight beside an arrow drawn
+ * at another reads as two icon sets in one paragraph. The chain says "this is a
+ * link", the arrow leaving its box says "and it leaves this page", which is the
+ * one thing about a link that is invisible until it has already happened.
+ *
+ * TextLink draws whichever one matches its `newTab`; a ChatBubble's link
+ * preview draws the chain beside the site it points at.
+ */
+export declare function LinkIcon(): React.JSX.Element;
+export declare function ExternalLinkIcon(): React.JSX.Element;
+/**
+ * The three dots that stand for what has been left out.
+ *
+ * Drawn rather than typed: `…` is a single glyph whose dots are spaced by
+ * whatever font the page happens to load, and it sits on the baseline rather
+ * than in the middle of the row it is standing in for. Breadcrumb draws it on
+ * the button that opens the collapsed middle of a trail.
+ */
+export declare function EllipsisIcon(): 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;
 /**

package/dist/internal/icons.js

@@ -1 +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 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"})]})};
+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 LinkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M6.5 9.5a2.75 2.75 0 0 0 4 .25l1.75-1.75a2.75 2.75 0 0 0-3.9-3.9L7.75 5.2",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("path",{d:"M9.5 6.5a2.75 2.75 0 0 0-4-.25L3.75 8a2.75 2.75 0 0 0 3.9 3.9l.6-.6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function ExternalLinkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M12.75 9.25v2.5a1.5 1.5 0 0 1-1.5 1.5h-7a1.5 1.5 0 0 1-1.5-1.5v-7a1.5 1.5 0 0 1 1.5-1.5h2.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("path",{d:"M9.5 2.75h3.75V6.5M7.25 8.75l5.75-5.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}export function EllipsisIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"3.5",cy:"8",r:"1.15",fill:"currentColor"}),r("circle",{cx:"8",cy:"8",r:"1.15",fill:"currentColor"}),r("circle",{cx:"12.5",cy:"8",r:"1.15",fill:"currentColor"})]})}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"})]})};