neba 0.0.1 → 1.1.0

package/dist/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { type PickerLabels } from '../../internal/calendar';
+import { type PickerShellProps } from '../../internal/picker';
+import type { NebaWeekday } from '../../types';
+/**
+ * What the four pickers agree on, so a caller who has learned one has learned
+ * the others. Spelled out here rather than in `internal/` because these are the
+ * props a reader of the docs is actually looking at.
+ */
+export interface DatePickerProps extends PickerShellProps {
+    /** The chosen day. Use with `onValueChange` for a controlled picker. */
+    value?: Date | null;
+    /** The day the picker starts on, for an uncontrolled one. */
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    /** Whether the calendar is open. Use with `onOpenChange` to control it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which month the calendar opens on when there is no value. @default this one */
+    defaultMonth?: Date;
+    /** The earliest day that may be chosen. Day-granular — the time is ignored. */
+    minDate?: Date | null;
+    /** The latest day that may be chosen. */
+    maxDate?: Date | null;
+    /**
+     * Blocks individual days that are inside the range but still not available —
+     * weekends, holidays, a room that is already booked.
+     */
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * BCP 47 tag deciding the month and weekday names, the order of the header's
+     * two buttons, and how the trigger writes the date. Defaults to the browser's.
+     */
+    locale?: string;
+    /** Which day the week starts on. Defaults to whatever the locale says. */
+    weekStartsOn?: NebaWeekday;
+    /**
+     * How the trigger writes the chosen date. Passed straight to `Intl`, so
+     * `{ dateStyle: 'full' }` and `{ year: '2-digit', month: 'narrow' }` both work.
+     * @default { dateStyle: 'medium' }
+     */
+    format?: Intl.DateTimeFormatOptions;
+    /** Shown in the trigger while nothing is chosen. */
+    placeholder?: React.ReactNode;
+    /** Offers the × that empties the control. @default false */
+    clearable?: boolean;
+    /** Offers the shortcut to today in the footer. @default true */
+    showTodayButton?: boolean;
+    /** Closes the popup as soon as a day is chosen. @default true */
+    closeOnSelect?: boolean;
+    /** The strings a screen reader hears. Every one has an English default. */
+    labels?: Partial<PickerLabels>;
+    /** Identifies the field when a form is submitted, as `YYYY-MM-DD`. */
+    name?: string;
+}
+/**
+ * One day, chosen from a calendar.
+ *
+ * The trigger is a TextField's shell wearing a calendar glyph, on purpose and
+ * for the reason Select's is: a form where the date field is a different height,
+ * radius or colour from the fields around it is a form that looks assembled.
+ *
+ * What the calendar is actually for is the header. A picker that only steps a
+ * month at a time puts a birthday thirty years back a hundred and eighty clicks
+ * away, so the month name and the year are each a button that opens a grid of
+ * its own — twelve months, then twelve years at a time. Any month of the year on
+ * screen is two clicks; any year at all is three.
+ *
+ * There is no typing 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 in the next is
+ * worse than one that never claimed to.
+ */
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;

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

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

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';

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

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

package/dist/components/date-range-picker/DateRangePicker.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { type PickerLabels } from '../../internal/calendar';
+import { type PickerShellProps } from '../../internal/picker';
+import type { NebaWeekday } from '../../types';
+/**
+ * Two ends, either of which may be missing.
+ *
+ * An object rather than a `[Date, Date]` tuple, and rather than two props. A
+ * range is one value — it is chosen in one gesture, cleared in one gesture and
+ * validated as a whole — and the two names are what stop a caller writing the
+ * end into the start. Half a range is a real state: it is what the picker holds
+ * between the first click and the second.
+ */
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+/** A named range offered as a shortcut beside the calendars. */
+export interface DateRangePreset {
+    label: React.ReactNode;
+    /**
+     * The range it stands for. A function when it depends on today, which is
+     * almost always — "the last 7 days" computed at render time is a range that
+     * would be wrong for anyone who left the tab open overnight.
+     */
+    value: DateRange | (() => DateRange);
+}
+export interface DateRangePickerProps extends PickerShellProps {
+    /** The chosen range. Use with `onValueChange` for a controlled picker. */
+    value?: DateRange | null;
+    defaultValue?: DateRange | null;
+    /** Always called with an object. A cleared range is `{ start: null, end: null }`. */
+    onValueChange?: (value: DateRange) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which month the left calendar opens on when there is no value. */
+    defaultMonth?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    shouldDisableDate?: (date: Date) => boolean;
+    locale?: string;
+    weekStartsOn?: NebaWeekday;
+    /** @default { dateStyle: 'medium' } */
+    format?: Intl.DateTimeFormatOptions;
+    /**
+     * How many months are on screen at once. Two is the default because a range
+     * that crosses a month boundary is the ordinary case, not the exception.
+     * @default 2
+     */
+    monthCount?: 1 | 2;
+    /** Shown in each half of the trigger while that end is unchosen. */
+    startPlaceholder?: React.ReactNode;
+    endPlaceholder?: React.ReactNode;
+    /** Shortcuts listed beside the calendars — "Last 7 days", "This month". */
+    presets?: readonly DateRangePreset[];
+    clearable?: boolean;
+    /** Closes the popup once both ends are chosen. @default true */
+    closeOnSelect?: boolean;
+    labels?: Partial<PickerLabels>;
+    /**
+     * Identifies the field when a form is submitted. Two hidden inputs of the same
+     * name, so the two ends arrive as `FormData.getAll(name)`.
+     */
+    name?: string;
+}
+/**
+ * A span between two days.
+ *
+ * Two months side by side, because a range that crosses a month boundary is the
+ * ordinary case and a one-month picker makes it a two-step navigation problem.
+ * The two panels are one calendar in two halves: the left one has no forward
+ * stepper, the right one has no back stepper, and either header's month and year
+ * buttons move both.
+ *
+ * The band between the ends is drawn as the pointer moves, before the second
+ * click lands. That preview is the whole affordance — without it the first click
+ * has no visible consequence and the control looks broken for the second or so
+ * between the two.
+ */
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;

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

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

package/dist/components/date-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DateRangePicker } from './DateRangePicker';
+export type { DateRange, DateRangePickerProps, DateRangePreset } from './DateRangePicker';

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

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

package/dist/components/date-time-picker/DateTimePicker.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { type PickerLabels } from '../../internal/calendar';
+import { type PickerShellProps } from '../../internal/picker';
+import { type TimeUnit } from '../../internal/date';
+import type { NebaWeekday } from '../../types';
+export interface DateTimePickerProps extends PickerShellProps {
+    /** The chosen moment. Use with `onValueChange` for a controlled picker. */
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which month the calendar opens on when there is no value. */
+    defaultMonth?: Date;
+    /**
+     * The earliest moment that may be chosen. Unlike DatePicker's, this one is
+     * read at full precision: the day it falls on stays available and the clock
+     * columns block the hours before it.
+     */
+    minDate?: Date | null;
+    /** The latest moment that may be chosen, likewise at full precision. */
+    maxDate?: Date | null;
+    shouldDisableDate?: (date: Date) => boolean;
+    shouldDisableTime?: (value: Date, unit: TimeUnit) => boolean;
+    locale?: string;
+    weekStartsOn?: NebaWeekday;
+    /**
+     * How the trigger writes the chosen moment. Passed straight to `Intl`.
+     * @default { dateStyle: 'medium', timeStyle: 'short' }
+     */
+    format?: Intl.DateTimeFormatOptions;
+    /** 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;
+    placeholder?: React.ReactNode;
+    clearable?: boolean;
+    /** Offers the shortcut to this moment in the footer. @default true */
+    showNowButton?: boolean;
+    /**
+     * Closes the popup as soon as a day is chosen. `false` here and `true` on
+     * DatePicker, because a moment is a day *and* a time and closing on the first
+     * of the two would leave the second one unanswered.
+     * @default false
+     */
+    closeOnSelect?: boolean;
+    labels?: Partial<PickerLabels>;
+    /** Identifies the field when a form is submitted, as `YYYY-MM-DDTHH:MM`. */
+    name?: string;
+}
+/**
+ * A day and a time, in one popup.
+ *
+ * Not a DatePicker that grew a clock and not a TimePicker that grew a calendar:
+ * the two panels sit side by side at exactly the same height — seven rows of
+ * cells each, which is why the calendar's grid and the clock's columns share the
+ * `--n-cell` ladder — so the popup is one rectangle rather than two of different
+ * sizes pushed together.
+ *
+ * The bounds do more work here than anywhere else. `minDate` is read at full
+ * precision, so a minimum of 09:30 on the 27th leaves the 27th selectable in the
+ * calendar and greys out the morning in the clock. That is the behaviour a
+ * "not before now" rule needs, and it is the one a day-granular check cannot give.
+ */
+export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLButtonElement>>;

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

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

package/dist/components/date-time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DateTimePicker } from './DateTimePicker';
+export type { DateTimePickerProps } from './DateTimePicker';

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

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

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
+import type { NebaStyleProps } from '../../types';
+/**
+ * A dialog takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant`: the three weights answer "how much does this surface
+ * assert itself against the page around it", and a modal has already taken the
+ * page. There is no `elevation` either — see `popupClasses`.
+ */
+export interface DialogProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'> {
+    /** The dialog is shown. Use with `onOpenChange` for a controlled dialog. */
+    open?: boolean;
+    /** Whether the dialog starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The element that opens the dialog, wired up by Base UI. Optional — a
+     * controlled dialog opened from somewhere else in the app needs no trigger at
+     * all, and passing one here is only a convenience for the common case.
+     */
+    trigger?: React.ReactElement;
+    /** The heading. Rendered as the `<h2>` that names the dialog. */
+    title?: React.ReactNode;
+    /** A line under the title, and the dialog's accessible description. */
+    description?: React.ReactNode;
+    /**
+     * The bottom row. Laid out end-aligned, so a pair of buttons needs no wrapper
+     * of its own — and `DialogClose` is what makes one of them dismiss.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Draws a hairline between the header, the body and the actions instead of
+     * separating them with space. Worth turning on the moment the body scrolls:
+     * the lines are what say the header stayed put.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Shows the × in the corner.
+     *
+     * On by default, unlike most booleans in the library. A modal dialog takes the
+     * page away until it is answered, and the visible way out should not have to
+     * be remembered.
+     * @default true
+     */
+    showClose?: boolean;
+    /** Accessible name of the × button. */
+    closeLabel?: string;
+    /**
+     * A hard cap on the sheet's width, overriding the one `size` implies. Numbers
+     * are pixels. For the dialog whose content decides its width — a wide table,
+     * a narrow confirmation — rather than for tuning the scale, which is `size`.
+     */
+    width?: number | string;
+    /**
+     * The sheet takes the full width its `size` allows.
+     *
+     * On by default, which is the other way round from every other component.
+     * Elsewhere `fullWidth` means "fill the container"; a dialog's container is
+     * the viewport, and a dialog that shrank to fit two words would be a tooltip.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /** Fills the viewport edge to edge. For a mobile-sized screen, or an editor. */
+    fullScreen?: boolean;
+    /**
+     * Whether the page behind is taken away. `'trap-focus'` keeps the page
+     * scrollable and clickable while still holding focus inside.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether pressing Escape or clicking outside closes the dialog. Turn it off
+     * for the dialog that has to be answered — and then give it actions that
+     * answer it, because there will be no other way out.
+     * @default true
+     */
+    dismissible?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export type DialogCloseProps = React.ComponentPropsWithoutRef<typeof BaseUIDialog.Close>;
+/**
+ * Closes the dialog it is inside.
+ *
+ * Exported because an uncontrolled dialog has no `setOpen` for its Cancel
+ * button to call, and the alternative — making every dialog controlled — is a
+ * piece of state per dialog that exists only to answer a button.
+ *
+ * `render` is Base UI's own escape hatch, so a real Neba button dismisses:
+ * `<DialogClose render={<Button variant="text">Cancel</Button>} />`.
+ */
+export declare const DialogClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A sheet that takes the page away until it is answered.
+ *
+ * The sections are props rather than compound sub-components, exactly as they
+ * are on Card: the arrangement of a dialog is fixed — heading, description,
+ * body, actions — and what a caller wants to decide is what goes in each slot.
+ * Base UI owns everything hard about it: the focus trap, the scroll lock, the
+ * `aria-labelledby` / `aria-describedby` wiring, restoring focus to the trigger,
+ * and the inert page behind.
+ *
+ * What is left here is the surface, the width ladder and the scroll behaviour —
+ * the header and the actions stay put while only the body scrolls, which is why
+ * `dividers` matters more here than on a Card.
+ */
+export declare function Dialog({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, style, children }: DialogProps): React.JSX.Element;

package/dist/components/dialog/Dialog.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as i}from"../box/Box";import{CloseIcon as o}from"../../internal/icons";import{hasContent as r,metaTextClasses as t,radiusClasses as s,sheetBodyClasses as d,sheetHeaderGapClasses as c,sheetSectionGapClasses as m,sheetTitleClasses as f,surfaceClasses as u,surfaceSlots as p}from"../../internal/styles";const x={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},b=[u,"relative flex w-full flex-col overflow-hidden","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),h=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),g="border-t [border-color:var(--n-line)]";export const DialogClose=l.Close;export function Dialog({size:u="md",color:v="primary",density:y="default",open:w,defaultOpen:j,onOpenChange:$,trigger:_,title:N,description:k,actions:C,dividers:z=!1,showClose:B=!0,closeLabel:D="Close",width:O,fullWidth:P=!0,fullScreen:T=!1,modal:W=!0,dismissible:L=!0,className:R,style:S,children:V}){const q=n[y][u],A=i[y][u],E=z?`${q} ${A}`:q,F=r(N)||r(k),G=r(C);return a(l.Root,{open:w,defaultOpen:j,modal:W,disablePointerDismissal:!L,onOpenChange:(e,a)=>{L||e||"escape-key"!==a.reason?$?.(e):a.cancel()},children:[_?e(l.Trigger,{render:_}):null,a(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${h}`}),e(l.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",T?"items-stretch":"items-center p-4"].join(" "),children:a(l.Popup,{className:[b,d[u],T?"h-full max-w-none rounded-none":`max-h-full ${s[u]} ${void 0===O?x[u]:""}`,T||P?"":"w-auto",z?"":`${A} ${m[u]}`,R??""].filter(Boolean).join(" "),style:{...p(v,3),...void 0===O?null:{maxWidth:"number"==typeof O?`${O}px`:O},...S},children:[F||B?a("div",{className:`flex shrink-0 items-start gap-3 ${E}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${c[u]}`,children:[r(N)?e(l.Title,{className:`font-semibold ${f[u]} m-0`,children:N}):null,r(k)?e(l.Description,{className:`m-0 text-(--neba-muted-fg) ${t[u]}`,children:k}):null]}),B?e(l.Close,{"aria-label":D,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(o,{})}):null]}):null,r(V)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",E,z&&(F||B)?g:"",z?"":"py-1 -my-1"].filter(Boolean).join(" "),children:V}):null,G?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",E,z?g:""].filter(Boolean).join(" "),children:C}):null]})})]})]})}

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

@@ -0,0 +1,2 @@
+export { Dialog, DialogClose } from './Dialog';
+export type { DialogCloseProps, DialogProps } from './Dialog';

package/dist/components/dialog/index.js

@@ -0,0 +1 @@
+export{Dialog,DialogClose}from"./Dialog";

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { NebaAlign, NebaColor, NebaOrientation, NebaSize } from '../../types';
+/** Where the label sits along a labelled divider. Ignored without a label. */
+export type DividerTextAlign = NebaAlign;
+export interface DividerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * Which way the line runs. A vertical divider has no height of its own — it
+     * stretches to its flex parent, the way a rule between two toolbar groups
+     * should.
+     * @default 'horizontal'
+     */
+    orientation?: NebaOrientation;
+    /**
+     * Semantic colour role. Only the hairline is coloured, and only faintly: this
+     * is the same `--n-line` a Card scores its sections with, so a standalone
+     * divider and a card's internal one are the same line.
+     * @default 'primary'
+     */
+    color?: NebaColor;
+    /** Type scale of the label. Nothing else on a divider has a size. */
+    size?: NebaSize;
+    /**
+     * How far the rule runs — the width of a horizontal divider, the height of a
+     * vertical one. A number is pixels; a string is any CSS length, so `'50%'`
+     * and `'12rem'` both work.
+     *
+     * `length` rather than `width`, because a divider is the one component whose
+     * long axis turns with `orientation`: a `width` that meant height half the
+     * time would be a worse name than a longer one.
+     *
+     * Left out, a horizontal divider is the full width of its container and a
+     * vertical one stretches to the height of the flex row it is in — which is
+     * what a rule between two things should do by default.
+     */
+    length?: number | string;
+    /**
+     * How thick the rule is. A number is pixels; a string is any CSS length.
+     * @default 1
+     */
+    thickness?: number | string;
+    /** A label set into the line — "OR" between two sign-in options. */
+    children?: React.ReactNode;
+    /**
+     * Where the label sits. `center` splits the line in half; `start` and `end`
+     * leave a short stub on the near side so the label still reads as set *into*
+     * the rule rather than floating above it.
+     * @default 'center'
+     */
+    textAlign?: DividerTextAlign;
+}
+/**
+ * A rule between two things.
+ *
+ * With no children it is Base UI's `Separator` and nothing else — a real
+ * `role="separator"` with the right `aria-orientation`. With children the line
+ * breaks around the label.
+ *
+ * `separator` is not a name-from-content role, so the visible label does *not*
+ * become the accessible name on its own: a screen reader would announce a bare
+ * "separator" and the word "OR" would be read as loose text somewhere nearby.
+ * A string label is therefore copied into `aria-label`. Anything richer is left
+ * alone — only the caller knows which part of it is the name.
+ *
+ * There is no `variant` and no `elevation`: a divider is not a surface. It has
+ * no acrylic, catches no light and casts no shadow.
+ */
+export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/divider/Divider.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as n}from"@base-ui/react/separator";import{metaTextClasses as l}from"../../internal/styles";const i="[border-color:var(--n-line)]";function a(e){return"number"==typeof e?`${e}px`:e}const o={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},s={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const Divider=t.forwardRef(function({orientation:t="horizontal",color:c="primary",size:d="md",length:f,thickness:h,textAlign:m="center",className:p,style:u,children:x,...w},b){const v="vertical"===t,g=null!=x&&!1!==x&&""!==x,$={"--n-line":`var(--neba-${c}-line)`,"--n-rule":a(h)??"1px"},y=a(f),j={...$,...void 0===y?null:v?{height:y}:{width:y},...u};if(!g)return e(n,{ref:b,orientation:t,className:[v?"w-0 border-l [border-left-width:var(--n-rule)] "+(void 0===y?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--n-rule)]",i,p??""].filter(Boolean).join(" "),style:j,...w});const[k,N]=o[t][m],z=v?"w-0 border-l [border-left-width:var(--n-rule)]":"h-0 border-t [border-top-width:var(--n-rule)]";return r(n,{ref:b,orientation:t,"aria-label":"string"==typeof x?x:void 0,className:["flex items-center",v?"w-auto flex-col "+(void 0===y?"self-stretch":""):"w-full",s[d],p??""].filter(Boolean).join(" "),style:j,...w,children:[e("span",{"aria-hidden":"true",className:`${z} ${k} ${i}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--neba-muted-fg)",l[d],v?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:x}),e("span",{"aria-hidden":"true",className:`${z} ${N} ${i}`})]})});

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

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps, DividerTextAlign } from './Divider';

package/dist/components/divider/index.js

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

package/dist/components/file-picker/FilePicker.d.ts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+/** Why a file was turned away. One reason per file, in the order they are checked. */
+export type FileRejectionReason = 'type' | 'size' | 'count';
+export interface FileRejection {
+    file: File;
+    reason: FileRejectionReason;
+}
+export interface FilePickerProps extends NebaStyleProps {
+    /**
+     * Drop shadow depth. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * Which files the browser's own picker offers, in the `accept` grammar —
+     * `'image/*,.pdf'`. Dropped files are checked against it too, which the
+     * attribute alone does not do.
+     */
+    accept?: string;
+    /** Whether more than one file may be chosen. @default false */
+    multiple?: boolean;
+    /** The largest a single file may be, in bytes. */
+    maxSize?: number;
+    /**
+     * How many files may be held at once. Implies `multiple`, and is checked
+     * against what is already chosen rather than against one drop.
+     */
+    maxFiles?: number;
+    /** The chosen files. Use with `onFilesChange` for a controlled picker. */
+    value?: readonly File[];
+    /** The initially chosen files, for an uncontrolled one. */
+    defaultValue?: readonly File[];
+    onFilesChange?: (files: File[]) => void;
+    /**
+     * Called with everything that was turned away, and why. Without it a rejected
+     * file disappears silently, which is the single worst thing a dropzone does.
+     */
+    onReject?: (rejections: FileRejection[]) => void;
+    /** Label above the box. */
+    label?: React.ReactNode;
+    /** Helper text below the box. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the picker invalid. */
+    error?: React.ReactNode;
+    /** Forces the invalid state without a message. Defaults to `!!error`. */
+    invalid?: boolean;
+    /** The line inside the box. Defaults to an English sentence. */
+    title?: React.ReactNode;
+    /** The line under it — what is accepted, how big, how many. */
+    hint?: React.ReactNode;
+    /** The glyph above the title. Pass `null` for a box with no picture in it. */
+    icon?: React.ReactNode;
+    /**
+     * Lists the chosen files under the box, each with a way to remove it.
+     * @default true
+     */
+    showList?: boolean;
+    /** Accessible name of a file's remove button. Receives the file's name. */
+    removeLabel?: (name: string) => string;
+    /** Stretches to the width of the container. @default true */
+    fullWidth?: boolean;
+    /** Unavailable. */
+    disabled?: boolean;
+    /** The files are shown but cannot be added to or removed. */
+    readOnly?: boolean;
+    /** Whether a file must be chosen before the form is submitted. */
+    required?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * `1.4 MB`, in the units a person reading a file list expects.
+ *
+ * Base 1000 rather than 1024, and `MB` rather than `MiB`: it is the number every
+ * operating system's file browser shows, and a picker that disagrees with the
+ * Finder about how big the file is has picked a fight it cannot win.
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * A box you drop files on, or click to open the file dialog.
+ *
+ * There is no Base UI primitive under this, and the fallback the library allows
+ * — plain React and DOM — is the right one: a dropzone is a `<div>` listening
+ * for four drag events and an `<input type="file">` it clicks for you. There is
+ * no popup to position, no focus to trap and no roving anything.
+ *
+ * What that leaves is the part every hand-rolled dropzone gets wrong. The drag
+ * counter is one of them: `dragenter` and `dragleave` both fire as the pointer
+ * crosses a *child* of the zone, so a zone that toggles a boolean flickers the
+ * whole time a file is being dragged across its own contents. Counting them is
+ * the fix. The other is `accept`, which the browser enforces on its own dialog
+ * and never on a drop, so a dropzone that only sets the attribute accepts
+ * anything the moment a file arrives by drag.
+ *
+ * The shell is a `<div>` and the pressable area inside it is a real `<button>`,
+ * with the file list outside that button — the same shape Chip and ListItem
+ * use, because the remove buttons cannot be nested inside the browse button.
+ */
+export declare const FilePicker: React.ForwardRefExoticComponent<FilePickerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/file-picker/FilePicker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{CloseIcon as t}from"../../internal/icons";import{controlTextLeadingClasses as a,disabledClasses as l,gapClasses as o,hasContent as i,iconClasses as s,metaTextClasses as c,radiusClasses as d,readOnlyFilterClasses as u,sheetTitleClasses as f,stackGapClasses as p,surfaceClasses as m,surfaceSlots as h,transitionClasses as b}from"../../internal/styles";const v={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},x={solid:[m,"border-2 border-dashed text-(--neba-fg) bg-(--n-panel-hover)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),outline:[m,"border-2 border-dashed text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"border-2 border-dashed text-(--neba-fg) bg-transparent [border-color:var(--n-line)]"},g={solid:"hover:bg-(--n-panel-press) hover:[border-color:var(--n-line-hover)]",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]",text:"hover:bg-(--n-soft) hover:[border-color:var(--n-line-hover)]"};function y(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let n=e/1e3,t=0;for(;n>=1e3&&t<r.length-1;)n/=1e3,t+=1;return`${n<10?n.toFixed(1):Math.round(n)} ${r[t]}`}function k(e,r){const n=e.name.toLowerCase(),t=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?n.endsWith(e):e.endsWith("/*")?t.startsWith(`${e.slice(0,-1)}`):t===e)}export const FilePicker=n.forwardRef(function({variant:m="outline",size:N="md",color:$="primary",density:j="default",elevation:w=0,accept:z,multiple:C=!1,maxSize:_,maxFiles:L,value:B,defaultValue:D,onFilesChange:I,onReject:F,label:M,description:W,error:S,invalid:R,title:T,hint:V,icon:E,showList:O=!0,removeLabel:q=e=>`Remove ${e}`,fullWidth:A=!0,disabled:P=!1,readOnly:G=!1,required:H=!1,name:Y,id:J,className:K,style:Q},U){const X=n.useRef(null);n.useImperativeHandle(U,()=>X.current);const[Z,ee]=n.useState(()=>[...D??[]]),re=B?[...B]:Z,ne=n.useRef(0),[te,ae]=n.useState(!1),le=i(S),oe=R??le,ie=oe?"danger":$,se=P||G,ce=n.useId(),de=n.useCallback(e=>{B||ee(e),I?.(e)},[I,B]),ue=n.useCallback(e=>{const r=[],n=[],t=C?L??Number.POSITIVE_INFINITY:1,a=C?re.length:0;for(const l of e)z&&!k(l,z)?n.push({file:l,reason:"type"}):void 0!==_&&l.size>_?n.push({file:l,reason:"size"}):a+r.length>=t?n.push({file:l,reason:"count"}):r.push(l);return{kept:r,rejections:n}},[z,re.length,L,_,C]),fe=n.useCallback(e=>{const{kept:r,rejections:n}=ue(e);n.length>0&&F?.(n),r.length>0&&de(C?[...re,...r]:r)},[ue,de,re,C,F]),pe=["flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",v[j][N],d[N],o[N],b,s,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",P?`${l[m]} border-2 border-dashed`:G?`${x[m]} ${u} cursor-default`:x[m],se?"":g[m],te&&!se?"bg-(--n-soft-press) [border-color:var(--n-ring)]":""].filter(Boolean).join(" ");return r("div",{className:["flex-col align-top",p[N],A?"flex w-full":"inline-flex",K??""].filter(Boolean).join(" "),style:{...h(ie,w),...Q},children:[i(M)?e("span",{className:[c[N],"font-medium",P?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:M}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{se||(e.preventDefault(),ne.current+=1,ae(!0))},onDragOver:e=>{se||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{se||(ne.current=Math.max(0,ne.current-1),0===ne.current&&ae(!1))},onDrop:e=>{se||(e.preventDefault(),ne.current=0,ae(!1),fe(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:J,disabled:P,"aria-describedby":i(W)||le?ce:void 0,"aria-invalid":oe||void 0,className:pe,onClick:()=>{se||X.current&&(X.current.value="",X.current.click())},children:[void 0===E?e("span",{className:"flex items-center text-(--n-accent) [&_svg]:size-[1.8em]",children:e(y,{})}):i(E)?e("span",{className:"flex items-center text-(--n-accent) [&_svg]:size-[1.8em]",children:E}):null,e("span",{className:`font-medium ${f[N]}`,children:T??"Drop files here, or click to browse"}),i(V)?e("span",{className:`text-(--neba-muted-fg) ${c[N]}`,children:V}):null]}),e("input",{ref:X,type:"file",name:Y,accept:z,multiple:C,required:H&&0===re.length,disabled:se,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>fe(Array.from(e.target.files??[]))})]}),O&&re.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${p[N]} m-0 list-none p-0`,children:re.map((n,l)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",d.xs,a[N],"bg-(--n-soft) text-(--neba-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:n.name}),e("span",{className:`shrink-0 text-(--neba-muted-fg) tabular-nums ${c[N]}`,children:formatFileSize(n.size)}),se?null:e("button",{type:"button","aria-label":q(n.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--neba-muted-fg) opacity-70","[transition:opacity_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","[&_svg]:size-[0.9em]","hover:text-(--neba-fg) hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"].join(" "),onClick:()=>de(re.filter((e,r)=>r!==l)),children:e(t,{})})]},`${n.name}-${n.size}-${n.lastModified}-${l}`))}):null,i(W)&&!le?e("span",{id:ce,className:`${c[N]} text-(--neba-muted-fg)`,children:W}):null,le?e("span",{id:ce,className:`${c[N]} text-(--n-accent)`,children:S}):null]})});

package/dist/components/file-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { FilePicker, formatFileSize } from './FilePicker';
+export type { FilePickerProps, FileRejection, FileRejectionReason } from './FilePicker';

package/dist/components/file-picker/index.js

@@ -0,0 +1 @@
+export{FilePicker,formatFileSize}from"./FilePicker";