neba 1.0.0 → 1.2.0

package/dist/components/time-picker/TimePicker.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { type PickerLabels, type TimeUnit } from '../../internal/calendar';
+import { type PickerShellProps } from '../../internal/picker';
+/**
+ * Which column of the clock a row belongs to. Re-exported so a caller writing a
+ * `shouldDisableTime` rule can name the argument it is handed.
+ */
+export type { TimeUnit };
+export interface TimePickerProps extends PickerShellProps {
+    /** The chosen time. A `Date`, so it carries a day as well — see `referenceDate`. */
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The day a chosen time is written onto while there is no value yet.
+     * @default today
+     */
+    referenceDate?: Date;
+    /** The earliest time of day that may be chosen. Only the clock is read. */
+    minTime?: Date | null;
+    /** The latest time of day that may be chosen. */
+    maxTime?: Date | null;
+    /**
+     * Blocks individual rows. Called once per row per column with the instant that
+     * row would produce and the column it is in, so a rule may be as coarse as
+     * "no afternoons" or as fine as one minute.
+     */
+    shouldDisableTime?: (value: Date, unit: TimeUnit) => boolean;
+    /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
+    hour12?: boolean;
+    /** Adds the seconds column. @default false */
+    showSeconds?: boolean;
+    /** How far apart the rows of each column are. @default 1 */
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+    locale?: string;
+    /**
+     * How the trigger writes the chosen time. Passed straight to `Intl`.
+     * @default { hour: 'numeric', minute: '2-digit' }, plus seconds when shown
+     */
+    format?: Intl.DateTimeFormatOptions;
+    placeholder?: React.ReactNode;
+    clearable?: boolean;
+    /** Offers the shortcut to the current time in the footer. @default true */
+    showNowButton?: boolean;
+    /**
+     * Closes the popup as soon as any column is touched. `false` by default and
+     * unlike DatePicker, because a time is two answers and closing after the first
+     * one would make choosing 9:30 a matter of opening the popup twice.
+     * @default false
+     */
+    closeOnSelect?: boolean;
+    labels?: Partial<PickerLabels>;
+    /** Identifies the field when a form is submitted, as `HH:MM` (`HH:MM:SS`). */
+    name?: string;
+}
+/**
+ * A time of day, chosen from columns.
+ *
+ * The bounds are checked at the granularity of the column being drawn, which is
+ * the detail that separates a working time picker from a frustrating one. With a
+ * `minTime` of 09:30, the hour `9` stays available — the hour *contains* allowed
+ * minutes — and it is the minute column that greys out `00` through `25`. The
+ * naive check compares the whole candidate instant and hides the 9 entirely,
+ * which makes half past nine unreachable.
+ *
+ * The value is a `Date` rather than a string or a number of minutes, because
+ * everything else in this library that carries a moment is one, and because a
+ * time on its own has nowhere to record that it crossed a DST boundary.
+ * `referenceDate` is the day a bare time is written onto.
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,2 @@
+export { TimePicker } from './TimePicker';
+export type { TimePickerProps, TimeUnit } from './TimePicker';

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

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

package/dist/components/timeline/Timeline.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaColor, NebaDensity, NebaOrientation, NebaSize } from '../../types';
+/**
+ * How far along one item is.
+ *
+ * Three states rather than two, because "the one you are on" is not the same
+ * claim as "done" and a sequence that cannot say which step is current is a
+ * list. Each gets its own axis — a filled bullet, a filled bullet with a halo
+ * around it, an empty one — rather than three shades of the same thing.
+ */
+export type TimelineStatus = 'complete' | 'current' | 'upcoming';
+/** How the line between two items is drawn. `none` leaves the gap open. */
+export type TimelineConnector = 'solid' | 'dashed' | 'dotted' | 'none';
+export interface TimelineProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'color'> {
+    /**
+     * How far the sequence has got: the index of the item being worked on now.
+     * Everything before it is complete, everything after it is still to come.
+     *
+     * An index rather than a value, because a timeline has no selection — nothing
+     * here is chosen, and the only question is how far down the list reality has
+     * reached. Omit it and every item is `upcoming` unless it says otherwise; pass
+     * the item count to mark the whole sequence done.
+     */
+    active?: number;
+    /** @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** Spacing between items. Never the type scale, never the bullet. */
+    density?: NebaDensity;
+    /**
+     * Which way the sequence runs. `vertical` is the default and the one that
+     * takes an arbitrary number of steps with an arbitrary amount to say about
+     * each; `horizontal` is the stepper across the top of a checkout, and it is
+     * only honest while every label is short.
+     * @default 'vertical'
+     */
+    orientation?: NebaOrientation;
+    /** Renders something other than an `<ol>` — Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+export interface TimelineItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'title'> {
+    /** The heading of this step. */
+    title?: React.ReactNode;
+    /**
+     * When it happened — a date, a duration, a name. Set beside the title on a
+     * wide item and under it on a narrow one.
+     */
+    meta?: React.ReactNode;
+    /**
+     * What goes inside the bullet: a number, an icon, an avatar. Omit it and the
+     * bullet is a plain disc, which is what a step with nothing to say about
+     * itself should be.
+     */
+    bullet?: React.ReactNode;
+    /**
+     * Overrides what the timeline's `active` would have computed for this item —
+     * a step that failed and stopped the sequence, a step that was skipped.
+     */
+    status?: TimelineStatus;
+    /** Overrides the timeline's colour family for this item alone. */
+    color?: NebaColor;
+    /**
+     * How the line to the next item is drawn.
+     * @default 'solid'
+     */
+    connector?: TimelineConnector;
+    /** The body of the step. */
+    children?: React.ReactNode;
+}
+/**
+ * One step.
+ *
+ * Its index is not a prop and cannot be: an item that had to be told where it
+ * was in the list would be an item every caller could put in the wrong place,
+ * and `active={2}` would stop meaning anything. The Timeline numbers its
+ * children as it walks them, and hands each one its index through a context.
+ */
+export declare const TimelineItem: React.ForwardRefExoticComponent<TimelineItemProps & React.RefAttributes<HTMLLIElement>>;
+/**
+ * A sequence of steps, in the order they happen in.
+ *
+ * There is no Base UI primitive under this and there should not be: a timeline
+ * has no selection, no roving focus and no keyboard contract — it is a list, and
+ * reaching for a composite primitive to draw one would hand every consumer's
+ * record of events the semantics of a widget.
+ *
+ * It is an `<ol>` for the reason it exists at all: the order *is* the content. A
+ * screen reader announcing "list of 5 items" over an unordered list would be
+ * describing something else.
+ *
+ * The children are numbered here rather than by a prop on each item, so `active`
+ * has something to count against and inserting a step in the middle does not
+ * mean renumbering the ones after it.
+ */
+export declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLOListElement>>;

package/dist/components/timeline/Timeline.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as r from"react";import{useRender as t}from"@base-ui/react/use-render";import{cx as n,hasContent as a,iconClasses as o,metaTextClasses as s,sheetBodyClasses as i,sheetTitleClasses as d,surfaceClasses as c,surfaceSlots as m,transitionClasses as p}from"../../internal/styles";const u=r.createContext(null),b=r.createContext({index:0,last:!1}),x={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"},f={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},v={default:{xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},compact:{xs:"pb-3",sm:"pb-3.5",md:"pb-4",lg:"pb-5",xl:"pb-6"}},g={default:{xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},compact:{xs:"pe-3",sm:"pe-3.5",md:"pe-4",lg:"pe-5",xl:"pe-6"}},h={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""},y={complete:`${c} bg-(--n-fill) text-(--n-on-solid) [box-shadow:var(--neba-plate-solid)]`,current:`${c} bg-(--n-fill) text-(--n-on-solid) [box-shadow:0_0_0_0.25rem_var(--n-soft),var(--neba-plate-solid)]`,upcoming:`${c} border-2 bg-(--n-panel) text-(--neba-muted-fg) [border-color:var(--n-line)]`},N={complete:"[border-color:var(--n-line-hover)]",current:"[border-color:var(--neba-border)]",upcoming:"[border-color:var(--neba-border)]"},w={complete:"text-(--neba-fg)",current:"text-(--n-accent)",upcoming:"text-(--neba-muted-fg)"};export const TimelineItem=r.forwardRef(function({title:t,meta:c,bullet:_,status:z,color:C,connector:$="solid",className:j,children:P,...R},T){const k=r.useContext(u),{index:A,last:I}=r.useContext(b),M=k?.size??"md",q=k?.density??"default",B=k?.orientation??"vertical",D=C??k?.color??"primary",E=k?.active??null,F=z??(null===E?"upcoming":A<E?"complete":A===E?"current":"upcoming"),G="horizontal"===B,H="none"!==$&&!I,J=e("span",{"aria-hidden":"true",className:n("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--n-bullet) text-[calc(var(--n-bullet)*0.5)] leading-none font-semibold tabular-nums",y[F],p,o),children:_}),K=H?e("span",{"aria-hidden":"true",className:n("pointer-events-none absolute",G?"top-[calc(var(--n-bullet)/2_-_1px)] start-(--n-bullet) end-0 border-t-2":"start-[calc(var(--n-bullet)/2_-_1px)] top-(--n-bullet) bottom-0 border-s-2",h[$],N[F],p)}):null,L=l("div",{className:n("flex min-w-0 flex-col gap-0.5",G?"mt-2":""),children:[a(t)||a(c)?l("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[a(t)?e("span",{className:n("font-semibold",d[M],w[F],p),children:t}):null,a(c)?e("span",{className:n("text-(--neba-muted-fg)",s[M]),children:c}):null]}):null,a(P)?e("div",{className:n("text-(--neba-muted-fg)",i[M]),children:P}):null]});return l("li",{ref:T,"aria-current":"current"===F?"step":void 0,"data-status":F,className:n("relative",G?n("flex min-w-0 flex-1 flex-col",I?"":g[q][M]):n("flex",f[M],I?"":v[q][M]),j),style:{"--n-bullet":x[M],...m(D,0),"--n-fill":`var(--neba-${D}-fill)`,"--n-on-solid":`var(--neba-${D}-on-solid)`},...R,children:[K,J,L]})});export const Timeline=r.forwardRef(function({active:l,size:a="md",color:o="primary",density:s="default",orientation:i="vertical",render:d,className:c,style:p,children:x,...f},v){const g=r.Children.toArray(x),h=g.length,y=r.useMemo(()=>({size:a,density:s,orientation:i,color:o,active:l??null}),[a,s,i,o,l]),N=t({render:d??e("ol",{}),ref:v,props:{role:"list",className:n("flex","horizontal"===i?"flex-row":"flex-col",c),style:{...m(o,0),...p},children:g.map((l,r)=>e(b.Provider,{value:{index:r,last:r===h-1},children:l},r)),...f}});return e(u.Provider,{value:y,children:N})});

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

@@ -0,0 +1,2 @@
+export { Timeline, TimelineItem } from './Timeline';
+export type { TimelineConnector, TimelineItemProps, TimelineProps, TimelineStatus } from './Timeline';

package/dist/components/timeline/index.js

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

package/dist/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaElevation, NebaPosition, NebaStyleProps } from '../../types';
+export interface ToolbarProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` — the default — is flat even when the bar is pinned:
+     * a shadow under a header is a way of saying "there is content beneath this",
+     * and that is only true once the page has been scrolled. Raise it yourself, or
+     * leave it flat and turn on `divider`.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * How the bar sits in the page's scroll.
+     *
+     * - `static` — in the flow, scrolling away with the content.
+     * - `sticky` — in the flow until it reaches the edge, then held there. What an
+     *   application header usually wants: it takes up its own space, so nothing
+     *   underneath has to be padded around it.
+     * - `fixed` — out of the flow entirely. The page needs padding of its own, or
+     *   the first screenful sits behind the bar.
+     * @default 'static'
+     */
+    position?: NebaPosition;
+    /** Which edge it is held against when `position` is not `static`. @default 'top' */
+    side?: 'top' | 'bottom';
+    /**
+     * Draws a hairline along the edge that faces the content — under a `top` bar,
+     * over a `bottom` one.
+     * @default false
+     */
+    divider?: boolean;
+    /** Pinned to the start of the bar: a logo, a title, a back button. */
+    start?: React.ReactNode;
+    /** Pinned to the end: the actions. */
+    end?: React.ReactNode;
+    /**
+     * Renders something other than a `<div>` — `render={<header />}`,
+     * `render={<nav />}`. Base UI's own escape hatch, and worth reaching for here:
+     * a page's header should be a `<header>`.
+     */
+    render?: useRender.RenderProp;
+    /** The middle. Takes whatever width `start` and `end` leave. */
+    children?: React.ReactNode;
+}
+/**
+ * A bar of controls: an application header, a page's action row, the strip along
+ * the bottom of an editor.
+ *
+ * Three slots and a row. `start` and `end` are pinned to their ends and
+ * `children` takes what is left, which is the arrangement every toolbar has ever
+ * had — so it is laid out here rather than left to a caller and a spacer `<div>`
+ * they have to remember.
+ *
+ * The one thing it does not do is take a height. A toolbar is as tall as the
+ * controls in it plus its padding, and that padding is the `size`/`density` pair
+ * every other surface uses — so `density="compact"` gives the dense bar without
+ * a second prop meaning the same thing, and without the type scale moving.
+ *
+ * It has no `role="toolbar"`, deliberately. That role is a promise about
+ * keyboard behaviour — one tab stop for the whole bar, arrow keys between the
+ * controls in it — and a bar that claims it without implementing it is worse for
+ * a keyboard reader than one that never claimed anything. What a header wants is
+ * `render={<header />}`; what a genuine roving-focus toolbar wants is a
+ * ButtonGroup, which is one.
+ */
+export declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/toolbar/Toolbar.js

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

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

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

package/dist/components/toolbar/index.js

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

package/dist/components/tree-view/TreeView.d.ts

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+/**
+ * How the hierarchy is drawn.
+ *
+ * - `none` — indentation only. The quietest, and usually right for a navigation
+ *   sidebar, where the tree is two levels deep and the labels say what the
+ *   structure is.
+ * - `simple` — one hairline rail per level, running the full height of the
+ *   group. Enough to follow a column of rows back to the branch it belongs to.
+ * - `folder` — the rail plus an elbow into every row, and the rail under a last
+ *   child stops at that row. The file-manager drawing, and the one to reach for
+ *   when the tree is deep.
+ */
+export type TreeViewLines = 'none' | 'simple' | 'folder';
+/** A row's identity, and what `expanded` and `selected` are lists of. */
+export type TreeViewValue = string | number;
+export interface TreeViewProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'ul'>, 'color' | 'defaultValue' | 'onSelect'> {
+    /**
+     * Drop shadow depth. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * How the hierarchy is drawn between the rows.
+     * @default 'simple'
+     */
+    lines?: TreeViewLines;
+    /** Which branches are open. Use with `onExpandedChange` for a controlled tree. */
+    expanded?: TreeViewValue[];
+    /** Which start open, for an uncontrolled one. */
+    defaultExpanded?: TreeViewValue[];
+    onExpandedChange?: (expanded: TreeViewValue[]) => void;
+    /**
+     * Which rows are chosen. An array even when only one row may be chosen at a
+     * time — the same shape Accordion's `value` takes, so turning `multiple` on
+     * does not also change the type of the value.
+     */
+    selected?: TreeViewValue[];
+    /** Which start chosen, for an uncontrolled one. */
+    defaultSelected?: TreeViewValue[];
+    onSelectedChange?: (selected: TreeViewValue[]) => void;
+    /**
+     * Whether more than one row may be chosen at a time.
+     * @default false
+     */
+    multiple?: boolean;
+    /** Unavailable. Every row stops answering. */
+    disabled?: boolean;
+    /** The name the tree is announced by. */
+    label?: string;
+    /** The top-level TreeItems. */
+    children?: React.ReactNode;
+}
+export interface TreeItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
+    /**
+     * Identifies the row to `expanded` and `selected`. One is generated when it is
+     * left out, which is fine for a tree nobody drives from code.
+     */
+    value?: TreeViewValue;
+    /**
+     * The row's text. Its own prop rather than `children`, because in a tree the
+     * children are the rows underneath it.
+     */
+    label?: React.ReactNode;
+    /** Content before the label — a folder glyph, a file type, a status dot. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, inside the pressable area — a count, a badge. */
+    endIcon?: React.ReactNode;
+    /**
+     * A control pinned to the end of the row.
+     *
+     * Deliberately outside the pressable area, the same shape ListItem uses: a
+     * row that both opens and holds a menu button has two things to press.
+     */
+    action?: React.ReactNode;
+    /** Renders the row as a link, for a tree that is navigation. */
+    href?: string;
+    /** Fires when the row is pressed, before it opens or is chosen. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * Forces the disclosure arrow onto a row with no children yet — the branch
+     * that is fetched the first time it is opened.
+     */
+    expandable?: boolean;
+    /** Unavailable. Its branch, if it is open, keeps working. */
+    disabled?: boolean;
+    /** The rows underneath this one. */
+    children?: React.ReactNode;
+}
+/**
+ * A tree of rows that open and shut.
+ *
+ * There is no Base UI primitive under this: the library has no tree, and the
+ * three things a tree owes — the `tree`/`treeitem`/`group` roles, one tab stop
+ * for the whole widget, and the arrow keys that walk it — are most of the
+ * component.
+ *
+ * The keyboard is handled once, here, rather than on every row. A tree's arrow
+ * keys are questions about the *tree* ("what is the next visible row", "where is
+ * my parent"), and the only element that can answer them is the one holding all
+ * of them. The rows the query returns are in document order, which is reading
+ * order, because a shut branch is unmounted rather than hidden.
+ */
+export declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLUListElement>>;
+/**
+ * One row, and everything under it.
+ *
+ * The `<li>` is the `treeitem` and it is what takes focus — not the row drawn
+ * inside it. That is the ARIA pattern, and it is also why the disclosure arrow
+ * is a plain span with a click handler rather than a button: a button inside the
+ * focusable row would be a second tab stop in a widget that is supposed to have
+ * exactly one, and the keyboard already opens a branch with ArrowRight.
+ */
+export declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/tree-view/TreeView.js

@@ -0,0 +1 @@
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{ChevronIcon as a}from"../../internal/icons";import{controlTextClasses as l,cx as s,gapClasses as o,hasContent as i,iconClasses as c,radiusClasses as d,surfaceClasses as u,surfaceSlots as m,transitionClasses as f}from"../../internal/styles";const p=n.createContext({size:"md",density:"default",disabled:!1,expandedKeys:new Set,selectedKeys:new Set,activeKey:null,toggle:()=>{},select:()=>{},activate:()=>{},register:()=>()=>{}}),x={solid:[u,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},g={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.75rem"},b={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},h={default:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"},compact:{xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-2",xl:"px-2.5"}},v={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.5rem]",lg:"rounded-[0.625rem]",xl:"rounded-[0.75rem]"},y={none:"",simple:"neba-tree-simple",folder:"neba-tree-folder"};function w(e){return Array.from(e.querySelectorAll('[role="treeitem"]'))}const k=e=>String(e);export const TreeView=n.forwardRef(function({variant:t="outline",size:r="md",color:a="primary",density:l="default",elevation:o=0,lines:i="simple",expanded:c,defaultExpanded:u,onExpandedChange:h,selected:v,defaultSelected:C,onSelectedChange:N,multiple:S=!1,disabled:K=!1,label:A,className:D,style:R,children:E,onKeyDown:j,...I},P){const[V,z]=n.useState(u??[]),[_,O]=n.useState(C??[]),[J,L]=n.useState(null),M=c??V,T=v??_,q=n.useRef(null),F=n.useCallback(e=>{q.current=e,"function"==typeof P?P(e):P&&(P.current=e)},[P]),H=n.useCallback(e=>{const t=k(e),r=c??V,n=r.some(e=>k(e)===t)?r.filter(e=>k(e)!==t):[...r,e];void 0===c&&z(n),h?.(n)},[c,V,h]),U=n.useCallback(e=>{const t=k(e),r=v??_,n=r.some(e=>k(e)===t),a=S?n?r.filter(e=>k(e)!==t):[...r,e]:[e];void 0===v&&O(a),N?.(a)},[S,v,_,N]),B=n.useRef(new Map),G=n.useCallback((e,t)=>(B.current.set(e,t),()=>{B.current.delete(e)}),[]),Q=JSON.stringify(M.map(k)),W=JSON.stringify(T.map(k)),X=n.useMemo(()=>({size:r,density:l,disabled:K,expandedKeys:new Set(M.map(k)),selectedKeys:new Set(T.map(k)),activeKey:J,toggle:H,select:U,activate:L,register:G}),[r,l,K,Q,W,J,H,U,G]);n.useEffect(()=>{const e=q.current;if(!e)return;const t=w(e);0!==t.length&&(null!==J&&t.some(e=>e.dataset.nebaValue===J)||L(t[0].dataset.nebaValue??null))});const Y=s("flex list-none flex-col p-1",d[r],x[t],f,y[i],D);return e(p.Provider,{value:X,children:e("ul",{ref:F,role:"tree","aria-label":A,"aria-multiselectable":S||void 0,className:Y,style:{...m(a,o),"--n-tree-indent":g[r],"--n-tree-row":b[r],...R},onKeyDown:function(e){if(j?.(e),e.defaultPrevented)return;const t=q.current,r=e.target?.closest?.('[role="treeitem"]');if(!t||!r||!t.contains(r))return;const n=w(t),a=n.indexOf(r);if(-1===a)return;const l=t=>{t&&(e.preventDefault(),L(t.dataset.nebaValue??null),t.focus())},s=e=>{const t=e.dataset.nebaValue;t&&B.current.get(t)?.toggle()},o="rtl"===getComputedStyle(t).direction,i=o?"ArrowLeft":"ArrowRight",c=o?"ArrowRight":"ArrowLeft",d=r.getAttribute("aria-expanded");switch(e.key){case"ArrowDown":l(n[a+1]);break;case"ArrowUp":l(n[a-1]);break;case"Home":l(n[0]);break;case"End":l(n[n.length-1]);break;case i:"false"===d?(e.preventDefault(),s(r)):"true"===d&&l(n[a+1]);break;case c:"true"===d?(e.preventDefault(),s(r)):l(r.parentElement?.closest('[role="treeitem"]'));break;case"Enter":case" ":e.preventDefault(),r.click()}},...I,children:E})})});export const TreeItem=n.forwardRef(function({value:d,label:u,startIcon:m,endIcon:x,action:g,href:b,expandable:y,disabled:w=!1,className:C,children:N,onClick:S,...K},A){const{size:D,density:R,disabled:E,expandedKeys:j,selectedKeys:I,activeKey:P,toggle:V,select:z,activate:_,register:O}=n.useContext(p),J=n.useId(),L=d??J,M=k(L),T=n.useRef(null),q=n.useCallback(e=>{T.current=e,"function"==typeof A?A(e):A&&(A.current=e)},[A]),F=n.Children.toArray(N),H=y??F.length>0,U=H&&j.has(M),B=I.has(M),G=w||E,Q=n.useRef({toggle:()=>{}});Q.current.toggle=()=>{!G&&H&&V(L)},n.useEffect(()=>O(M,Q.current),[M,O]);const W=s("flex min-w-0 flex-1 cursor-pointer items-center text-start","h-(--n-tree-row)",h[R][D],v[D],o[D],l[D],f,c,"group-focus-visible/tree-item:[outline:2px_solid_var(--n-ring)]","group-focus-visible/tree-item:outline-offset-[-2px]",G?"cursor-not-allowed text-(--neba-disabled-fg)":B?"bg-(--n-soft-press) font-medium text-(--n-accent) hover:bg-(--n-soft-press)":"hover:bg-(--n-soft)"),X=r(t,{children:[e("span",{"aria-hidden":"true",onClick:e=>{!G&&H&&(e.stopPropagation(),e.preventDefault(),T.current?.focus(),_(M),V(L))},className:s("flex h-[1lh] w-[1.15em] shrink-0 items-center justify-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",H?"text-(--neba-muted-fg)":"",U?"rotate-0":"-rotate-90 rtl:rotate-90"),children:H?e(a,{}):null}),i(m)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:m}):null,e("span",{className:"min-w-0 flex-1 truncate",children:u}),i(x)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:x}):null]});return r("li",{ref:q,role:"treeitem","aria-expanded":H?U:void 0,"aria-selected":!!B||void 0,"aria-disabled":G||void 0,"data-neba-value":M,tabIndex:P===M?0:-1,className:s("group/tree-item relative block [outline:none]",C),onClick:function(e){e.stopPropagation(),G?e.preventDefault():(T.current?.focus(),_(M),S?.(e),e.defaultPrevented||(H&&V(L),z(L)))},...K,children:[r("div",{className:"flex w-full items-center",children:[b&&!G?e("a",{href:b,tabIndex:-1,className:W,"aria-current":B?"page":void 0,children:X}):e("div",{className:W,children:X}),i(g)?e("span",{className:s("flex shrink-0 items-center",h[R][D]),onClick:e=>e.stopPropagation(),children:g}):null]}),H&&U&&F.length>0?e("ul",{role:"group",className:"list-none ps-(--n-tree-indent)",children:N}):null]})});

package/dist/components/tree-view/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItem, TreeView } from './TreeView';
+export type { TreeItemProps, TreeViewLines, TreeViewProps, TreeViewValue } from './TreeView';

package/dist/components/tree-view/index.js

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

package/dist/index.d.ts

@@ -1,32 +1,58 @@
 export * from './types';
 export * from './components/accordion';
 export * from './components/alert';
+export * from './components/avatar';
 export * from './components/badge';
+export * from './components/blockquote';
 export * from './components/box';
+export * from './components/breadcrumb';
 export * from './components/button';
 export * from './components/button-group';
 export * from './components/card';
+export * from './components/carousel';
+export * from './components/chat-bubble';
 export * from './components/checkbox';
 export * from './components/chip';
 export * from './components/combobox';
+export * from './components/container';
+export * from './components/date-picker';
+export * from './components/date-range-picker';
+export * from './components/date-time-picker';
 export * from './components/dialog';
 export * from './components/divider';
 export * from './components/file-picker';
+export * from './components/grid';
+export * from './components/grid-container';
+export * from './components/highlight';
+export * from './components/icon';
+export * from './components/icon-button';
 export * from './components/list';
 export * from './components/menu';
 export * from './components/number-field';
+export * from './components/otp-field';
 export * from './components/overlay';
 export * from './components/pagination';
+export * from './components/panes';
+export * from './components/pill';
 export * from './components/progress-box';
 export * from './components/progress-circular';
 export * from './components/progress-linear';
 export * from './components/radio-group';
+export * from './components/segmented-button';
 export * from './components/select';
+export * from './components/shortcut';
 export * from './components/slider';
+export * from './components/spoiler';
+export * from './components/statistic';
 export * from './components/switch';
 export * from './components/table';
 export * from './components/tabs';
 export * from './components/text-field';
+export * from './components/text-link';
+export * from './components/time-picker';
+export * from './components/timeline';
 export * from './components/toast';
+export * from './components/toolbar';
 export * from './components/tooltip';
+export * from './components/tree-view';
 export * from './components/typography';

package/dist/index.js

@@ -1 +1 @@
-export*from"./types";export*from"./components/accordion";export*from"./components/alert";export*from"./components/badge";export*from"./components/box";export*from"./components/button";export*from"./components/button-group";export*from"./components/card";export*from"./components/checkbox";export*from"./components/chip";export*from"./components/combobox";export*from"./components/dialog";export*from"./components/divider";export*from"./components/file-picker";export*from"./components/list";export*from"./components/menu";export*from"./components/number-field";export*from"./components/overlay";export*from"./components/pagination";export*from"./components/progress-box";export*from"./components/progress-circular";export*from"./components/progress-linear";export*from"./components/radio-group";export*from"./components/select";export*from"./components/slider";export*from"./components/switch";export*from"./components/table";export*from"./components/tabs";export*from"./components/text-field";export*from"./components/toast";export*from"./components/tooltip";export*from"./components/typography";
+export*from"./types";export*from"./components/accordion";export*from"./components/alert";export*from"./components/avatar";export*from"./components/badge";export*from"./components/blockquote";export*from"./components/box";export*from"./components/breadcrumb";export*from"./components/button";export*from"./components/button-group";export*from"./components/card";export*from"./components/carousel";export*from"./components/chat-bubble";export*from"./components/checkbox";export*from"./components/chip";export*from"./components/combobox";export*from"./components/container";export*from"./components/date-picker";export*from"./components/date-range-picker";export*from"./components/date-time-picker";export*from"./components/dialog";export*from"./components/divider";export*from"./components/file-picker";export*from"./components/grid";export*from"./components/grid-container";export*from"./components/highlight";export*from"./components/icon";export*from"./components/icon-button";export*from"./components/list";export*from"./components/menu";export*from"./components/number-field";export*from"./components/otp-field";export*from"./components/overlay";export*from"./components/pagination";export*from"./components/panes";export*from"./components/pill";export*from"./components/progress-box";export*from"./components/progress-circular";export*from"./components/progress-linear";export*from"./components/radio-group";export*from"./components/segmented-button";export*from"./components/select";export*from"./components/shortcut";export*from"./components/slider";export*from"./components/spoiler";export*from"./components/statistic";export*from"./components/switch";export*from"./components/table";export*from"./components/tabs";export*from"./components/text-field";export*from"./components/text-link";export*from"./components/time-picker";export*from"./components/timeline";export*from"./components/toast";export*from"./components/toolbar";export*from"./components/tooltip";export*from"./components/tree-view";export*from"./components/typography";