neba 0.0.1 → 1.1.0

package/dist/components/statistic/index.js

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

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Switch as BaseUISwitch } from '@base-ui/react/switch';
+import type { NebaColor, NebaSize } from '../../types';
+/** Which side of the track the label sits on. */
+export type SwitchLabelPlacement = 'start' | 'end';
+type BaseSwitchProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUISwitch.Root>, 'className' | 'style' | 'render' | 'children'>;
+export interface SwitchProps extends BaseSwitchProps {
+    /** @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** The text beside the track. Wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text under the label. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the switch invalid. */
+    error?: React.ReactNode;
+    /** Forces the invalid state without a message. Defaults to `!!error`. */
+    invalid?: boolean;
+    /**
+     * Which side the label sits on. `end` reads as a caption for the control;
+     * `start` is for a settings list, where the labels form a column and every
+     * switch lines up on the right.
+     * @default 'end'
+     */
+    labelPlacement?: SwitchLabelPlacement;
+    /** Class names for the field wrapper, not for the track. */
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * An immediate on/off.
+ *
+ * The difference from a Checkbox is not visual, it is temporal: a checkbox is a
+ * value that gets submitted with a form, a switch takes effect the moment it
+ * moves. If there is a Save button underneath, it should have been a checkbox.
+ */
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/switch/Switch.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Switch as l}from"@base-ui/react/switch";import{Field as o}from"@base-ui/react/field";import{controlTextClasses as t,metaTextClasses as i,surfaceClasses as c,tickRowLeadingClasses as s}from"../../internal/styles";const d={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},b={xs:"data-[checked]:left-[calc(100%-0.75rem)]",sm:"data-[checked]:left-[calc(100%-0.875rem)]",md:"data-[checked]:left-[calc(100%-1.125rem)]",lg:"data-[checked]:left-[calc(100%-1.375rem)]",xl:"data-[checked]:left-[calc(100%-1.625rem)]"},h=["relative inline-flex shrink-0 border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","rounded-full","[transition-property:background-color,border-color,box-shadow]","[transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),f=[c,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),m=[c,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]"].join(" "),u=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" "),v=["absolute inset-y-0.5 left-0.5 aspect-square rounded-full bg-(--neba-surface)","[box-shadow:var(--neba-shadow-1)]","[transition:left_var(--neba-duration)_var(--neba-ease)]"].join(" ");export const Switch=n.forwardRef(function({size:n="md",color:c="primary",label:p,description:g,error:x,invalid:w,labelPlacement:k="end",disabled:j=!1,readOnly:$=!1,className:N,style:y,..._},R){const B=null!=x&&!1!==x&&""!==x,O=w??B,S=O?"danger":c,q={"--n-fill":`var(--neba-${S}-fill)`,"--n-fill-hover":`var(--neba-${S}-fill-hover)`,"--n-accent":`var(--neba-${S}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${S}-line)`,"--n-line-hover":`var(--neba-${S}-line-hover)`,"--n-ring":`var(--neba-${S}-ring)`},z=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:R,className:[h,d[n],j?u:$?m:f].join(" "),disabled:j,readOnly:$,..._,children:e(l.Thumb,{className:`${v} ${b[n]}`})})}),D=p||g?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===k?"flex-1":""].filter(Boolean).join(" "),children:[p?e(o.Label,{className:["leading-[1.4]",j?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)"].join(" "),children:p}):null,g?e(o.Description,{className:`${i[n]} text-(--neba-muted-fg)`,children:g}):null]}):null;return a(o.Root,{disabled:j,invalid:O,className:["inline-flex flex-col gap-1 align-top",N??""].filter(Boolean).join(" "),style:{...q,...y},children:[e("div",{className:`flex items-start gap-2.5 ${t[n]} ${s}`,children:a(r,"start"===k?{children:[D,z]}:{children:[z,D]})}),B?e(o.Error,{match:!0,className:`${i[n]} text-(--n-accent)`,children:x}):null]})});

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

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchLabelPlacement, SwitchProps } from './Switch';

package/dist/components/switch/index.js

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

package/dist/components/table/Table.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { type BoxProps } from '../box/Box';
+import type { NebaAlign } from '../../types';
+/** Which edge the text in a column lines up against. */
+export type TableAlign = NebaAlign;
+/**
+ * A column: its heading, its default width, and how to get a cell out of a row.
+ *
+ * This is the whole reason Table takes data rather than markup. A `<td>` written
+ * out per row can silently disagree with the `<th>` above it about how many
+ * there are or what order they come in; a column list cannot.
+ */
+export interface TableColumn<Row> {
+    /**
+     * Identifies the column, and — unless `render` says otherwise — names the
+     * property to read off each row.
+     */
+    key: string;
+    /** The heading. Defaults to the `key`, which is usually not what you want. */
+    label?: React.ReactNode;
+    /**
+     * The column's default width. A number is pixels; a string is any CSS length
+     * (`'30%'`, `'12rem'`, `'minmax(...)'` is not — this is a `<col>`, not a grid).
+     *
+     * "Default" is meant: the table still balances the columns to fill its width,
+     * so this is a starting proportion rather than a guarantee.
+     */
+    width?: number | string;
+    /**
+     * Text alignment. Numbers usually want `end` so their digits line up in a
+     * column; everything else wants `start`.
+     * @default 'start'
+     */
+    align?: TableAlign;
+    /**
+     * Renders the cell. Without it the cell is `row[key]` rendered as-is, which
+     * covers strings and numbers and nothing else.
+     */
+    render?: (row: Row, index: number) => React.ReactNode;
+}
+export interface TableProps<Row> extends Omit<BoxProps, 'padded' | 'children' | 'render' | 'title'> {
+    /** The columns, in the order they appear. */
+    headers: readonly TableColumn<Row>[];
+    /** The rows. */
+    items: readonly Row[];
+    /**
+     * A stable key per row. Defaults to the row's index, which is fine for a
+     * static table and wrong for one that sorts or filters.
+     */
+    getRowKey?: (row: Row, index: number) => React.Key;
+    /** Shown above the table, and read out as its accessible name. */
+    caption?: React.ReactNode;
+    /** What to show instead of rows when `items` is empty. */
+    empty?: React.ReactNode;
+    /**
+     * Tints every other row. Useful for a wide table where the eye has to track
+     * across; noise on a narrow one.
+     * @default false
+     */
+    striped?: boolean;
+    /** Lights the row under the pointer. @default false */
+    hoverable?: boolean;
+    /**
+     * Pins the header while the body scrolls. Only does anything if something
+     * around the table actually constrains its height.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /** Makes rows activatable. Also turns on the hover treatment. */
+    onRowClick?: (row: Row, index: number) => void;
+}
+/**
+ * A grid of data.
+ *
+ * The sheet is a Box — `variant`, `size`, `color`, `density` and `elevation` all
+ * pass straight through, so a table is styled on the same axes as everything it
+ * might sit next to. What Table adds is the part that is genuinely tabular: the
+ * columns, the rows, and the fact that the two cannot drift apart.
+ */
+export declare function Table<Row>({ headers, items, getRowKey, caption, empty, striped, hoverable, stickyHeader, onRowClick, size, density, className, ...boxProps }: TableProps<Row>): React.JSX.Element;

package/dist/components/table/Table.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as r}from"../box/Box";import{controlTextLeadingClasses as a,metaTextClasses as l,paddingXValues as n}from"../../internal/styles";const o={default:{xs:"0.25rem",sm:"0.375rem",md:"0.625rem",lg:"0.75rem",xl:"0.875rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"}},s=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),i={borderTop:"1px solid var(--n-line)",backgroundColor:"var(--n-row)"};export function Table({headers:d,items:c,getRowKey:m,caption:p,empty:h,striped:b=!1,hoverable:x=!1,stickyHeader:y=!1,onRowClick:g,size:f="md",density:u="default",className:v,...w}){const k=n[u][f],N=o[u][f],j=Boolean(g),$=x||j,B={padding:`${N} ${k}`},C={...B,backgroundColor:"var(--n-panel-press)"};return e(r,{size:f,density:u,padded:!1,className:["overflow-x-auto",v??""].filter(Boolean).join(" "),...w,children:t("table",{className:`w-full text-start ${a[f]} text-(--neba-fg)`,style:{borderCollapse:"collapse"},children:[p?e("caption",{className:`${l[f]} text-(--neba-muted-fg)`,style:{...B,textAlign:"start"},children:p}):null,e("colgroup",{children:d.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{children:e("tr",{children:d.map(t=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--neba-muted-fg)",y?"sticky top-0 z-10 [backdrop-filter:var(--neba-blur)]":""].filter(Boolean).join(" "),style:{...C,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{children:0===c.length?e("tr",{className:s,style:i,children:e("td",{colSpan:d.length,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${k}`,textAlign:"center"},children:h??"No data"})}):c.map((t,r)=>e("tr",{className:[s,b&&r%2==1?"[--n-row:var(--n-panel-hover)]":"",$?"hover:[--n-row:var(--n-soft)]":"",j?"cursor-pointer":""].filter(Boolean).join(" "),style:i,onClick:g?()=>g(t,r):void 0,children:d.map(a=>e("td",{style:{...B,textAlign:a.align??"start"},children:a.render?a.render(t,r):t[a.key]},a.key))},m?m(t,r):r))})]})})}

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

@@ -0,0 +1,2 @@
+export { Table } from './Table';
+export type { TableAlign, TableColumn, TableProps } from './Table';

package/dist/components/table/index.js

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

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type { NebaOrientation, NebaStyleProps, NebaVariant } from '../../types';
+/** A tab's value. The same restraint Select puts on its own — an identifier. */
+export type TabValue = string | number;
+export interface TabsProps extends Omit<NebaStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Weight of the tab *bar*, not of the panels under it.
+     *
+     * - `solid` — a segmented control: the bar is a frosted trough and the
+     *   indicator is a filled tile that slides between the tabs.
+     * - `outline` — the classic: a rule along the edge of the bar with the
+     *   indicator riding on it.
+     * - `text` — the same bar with the rule taken away, for tabs inside a Card
+     *   that already has an edge of its own.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /** The chosen tab. Use with `onValueChange` for a controlled set. */
+    value?: TabValue | null;
+    /** Which starts chosen, for an uncontrolled set. */
+    defaultValue?: TabValue | null;
+    onValueChange?: (value: TabValue | null) => void;
+    /**
+     * Which way the bar runs. `vertical` puts the tabs down the side and the
+     * panel beside them, and moves the arrow keys onto the other axis — which is
+     * Base UI's doing, and is what makes a vertical tab bar reachable.
+     * @default 'horizontal'
+     */
+    orientation?: NebaOrientation;
+    /**
+     * Whether moving the arrow keys also chooses the tab it lands on.
+     *
+     * `false` by default. Automatic activation is only kind when every panel is
+     * already on the page; the moment one of them fetches, walking past four tabs
+     * fires four requests.
+     * @default false
+     */
+    activateOnFocus?: boolean;
+    /**
+     * Whether the arrow keys wrap from the last tab back to the first.
+     * @default true
+     */
+    loopFocus?: boolean;
+    /** The tabs share the bar's full width, each taking an equal share of it. */
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}
+export interface TabProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'color'> {
+    /** Identifies the tab, and picks out the panel with the same value. */
+    value: TabValue;
+    /** Content before the label. Sized in `em`, so it tracks the label. */
+    startIcon?: React.ReactNode;
+    /** Content after the label — a count, a Badge, a status dot. */
+    endIcon?: React.ReactNode;
+    /** Unavailable, but still listed. */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+export interface TabPanelProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Which tab shows this panel. */
+    value: TabValue;
+    /**
+     * Keeps the panel in the DOM while it is hidden. For a panel that is expensive
+     * to build, or that holds form state which should survive being switched away
+     * from.
+     * @default false
+     */
+    keepMounted?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * One tab, and one place a tab differs from a Button: `solid` puts the tile
+ * *behind* the tab rather than on it, so the tab needs a stacking context of its
+ * own or the indicator would cover the label it is meant to be under.
+ */
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
+/** The content behind one tab. */
+export declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One set of panels, one of which is shown.
+ *
+ * Base UI owns everything that makes a tab bar a tab bar rather than a row of
+ * buttons: roving focus so the whole bar is one tab stop, the arrow keys on
+ * whichever axis the bar runs, Home and End, the `tab` / `tabpanel` roles and
+ * the `aria-controls` wiring between them, and the measurement that puts the
+ * indicator under the chosen tab. What is here is the surface and the ladders.
+ *
+ * The tabs and the panels are composed rather than passed as data, unlike
+ * Select — because a panel is a subtree, and there is no useful shape for
+ * "an array of arbitrary React trees" that is not just children.
+ */
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tabs/Tabs.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{controlHeightClasses as o,controlTextClasses as l,gapClasses as n,hasContent as r,iconClasses as s,paddingXClasses as c,radiusClasses as d,surfaceClasses as f,surfaceSlots as u,transitionClasses as h}from"../../internal/styles";const b=a.createContext({variant:"outline",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),v={solid:{horizontal:`${f} inline-flex bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`,vertical:`${f} inline-flex flex-col bg-(--n-panel) p-1 [box-shadow:var(--neba-plate-glass)]`},outline:{horizontal:"flex border-b [border-color:var(--n-line)]",vertical:"flex flex-col border-e [border-color:var(--n-line)]"},text:{horizontal:"flex",vertical:"flex flex-col"}},p={solid:{horizontal:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)"},outline:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},text:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},x={solid:`${f} bg-(--n-panel-press) [box-shadow:var(--neba-shadow-1),var(--neba-plate-glass)]`,outline:"bg-(--n-accent)",text:"bg-(--n-accent)"},m={solid:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",outline:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)",text:"text-(--neba-muted-fg) hover:text-(--neba-fg) data-[active]:text-(--n-accent)"};export const Tab=a.forwardRef(function({value:f,startIcon:u,endIcon:v,disabled:p=!1,className:x,children:g,...w},z){const{variant:y,size:N,density:j,fullWidth:k}=a.useContext(b);return t(i.Tab,{ref:z,value:f,disabled:p,className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","whitespace-nowrap font-medium","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",o[N],l[N],n[N],c[j][N],"solid"===y?d[N]:"",h,s,m[y],"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)",k?"flex-1":"",x??""].filter(Boolean).join(" "),...w,children:[r(u)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:u}):null,g,r(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]})});export const TabPanel=a.forwardRef(function({value:t,keepMounted:o=!1,className:l,children:n,...r},s){const{size:c}=a.useContext(b);return e(i.Panel,{ref:s,value:t,keepMounted:o,className:["min-w-0 flex-1 text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",d[c],l??""].filter(Boolean).join(" "),...r,children:n})});export const Tabs=a.forwardRef(function({variant:o="outline",size:l="md",color:n="primary",density:r="default",value:s,defaultValue:c,onValueChange:f,orientation:h="horizontal",activateOnFocus:m=!1,loopFocus:g=!0,fullWidth:w=!1,className:z,style:y,children:N,...j},k){const C=a.useMemo(()=>({variant:o,size:l,density:r,orientation:h,fullWidth:w}),[o,l,r,h,w]),T=[],V=[];return a.Children.forEach(N,e=>{a.isValidElement(e)&&e.type===TabPanel?V.push(e):null!=e&&!1!==e&&T.push(e)}),e(b.Provider,{value:C,children:t(i.Root,{ref:k,value:s,defaultValue:c,onValueChange:e=>f?.(e),orientation:h,className:["flex min-w-0","vertical"===h?"flex-row gap-4":"flex-col gap-4",z??""].filter(Boolean).join(" "),style:{...u(n,0),...y},...j,children:[t(i.List,{activateOnFocus:m,loopFocus:g,className:["relative shrink-0",v[o][h],"solid"===o?d[l]:"",w&&"horizontal"===h?"w-full":"","horizontal"===h?"overflow-x-auto overflow-y-hidden":""].filter(Boolean).join(" "),children:[T,e(i.Indicator,{className:["pointer-events-none",p[o][h],x[o],"solid"===o?d[l]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" ")})]}),V]})})});

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

@@ -0,0 +1,2 @@
+export { Tab, TabPanel, Tabs } from './Tabs';
+export type { TabPanelProps, TabProps, TabsProps, TabValue } from './Tabs';

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export{Tab,TabPanel,Tabs}from"./Tabs";

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+/** How the multiline control may be resized by the user. Ignored when single line. */
+export type TextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
+/**
+ * Native `<input>` attributes, minus the three that collide with the shared
+ * vocabulary: `color` and `size` are Neba props here, and `onChange` is widened
+ * below so the same handler types against a `<textarea>` in multiline mode.
+ */
+type NativeControlProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'color' | 'size' | 'onChange' | 'children'>;
+export interface TextFieldProps extends NebaStyleProps, NativeControlProps {
+    /**
+     * Drop shadow depth. `0` (the default) is flat — a field is a well, not a
+     * surface that floats, so this is raised even less often than on a Button.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * Renders a `<textarea>` instead of an `<input>`. Everything else — sizing,
+     * density, variants, states — stays identical, so switching a field to
+     * multiline never changes how it sits in a form.
+     * @default false
+     */
+    multiline?: boolean;
+    /** Visible rows in multiline mode. One row is exactly the single-line height. */
+    rows?: number;
+    /**
+     * Which way the user may drag the multiline control. Horizontal resizing
+     * breaks a form's column, so only the vertical axis is on by default.
+     * @default 'vertical'
+     */
+    resize?: TextFieldResize;
+    /**
+     * Label above the control, wired to it by Base UI's Field. There is no
+     * floating variant on purpose: floating labels need a `transform`, and
+     * controls in this library never transform.
+     */
+    label?: React.ReactNode;
+    /** Helper text below the control. */
+    description?: React.ReactNode;
+    /** Error message below the control. Its presence also turns the field invalid. */
+    error?: React.ReactNode;
+    /**
+     * Forces the invalid state without a message — for when an external form
+     * library owns the validity. Defaults to whether `error` has content.
+     */
+    invalid?: boolean;
+    /** Content placed before the control. Sized in `em`, so it tracks the text. */
+    startIcon?: React.ReactNode;
+    /** Content placed after the control. */
+    endIcon?: React.ReactNode;
+    /**
+     * Shows a spinner in place of `endIcon` and marks the field busy. Typing is
+     * deliberately still allowed — a field is usually loading *because of* what
+     * was typed into it.
+     */
+    loading?: boolean;
+    /** Stretches to the width of the container. */
+    fullWidth?: boolean;
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export {};

package/dist/components/text-field/TextField.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Field as r}from"@base-ui/react/field";import{Input as i}from"@base-ui/react/input";import{controlHeightClasses as l,controlTextLeadingClasses as a,disabledClasses as s,fieldReadOnlyClasses as o,fieldRestClasses as c,focusWithinRingClasses as d,gapClasses as m,iconClasses as u,metaTextClasses as f,paddingXClasses as p,radiusClasses as x,stackGapClasses as h,surfaceSlots as g,transitionClasses as b}from"../../internal/styles";const y={xs:`${m.xs} ${x.xs} ${a.xs}`,sm:`${m.sm} ${x.sm} ${a.sm}`,md:`${m.md} ${x.md} ${a.md}`,lg:`${m.lg} ${x.lg} ${a.lg}`,xl:`${m.xl} ${x.xl} ${a.xl}`},$={xs:"min-h-5.5 py-[3px]",sm:"min-h-6.5 py-[4px]",md:"min-h-8 py-[5px]",lg:"min-h-10 py-[8px]",xl:"min-h-12 py-[10px]"},v={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},w=["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",b,"focus-within:[transition-duration:0ms]",d,u].join(" "),N=c,j=o;function k(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"animate-spin",children:[e("circle",{cx:"8",cy:"8",r:"6.5",stroke:"currentColor",strokeOpacity:"0.25",strokeWidth:"2"}),e("path",{d:"M14.5 8A6.5 6.5 0 0 0 8 1.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}export const TextField=n.forwardRef(function({variant:a="outline",size:o="md",color:c="primary",density:d="default",elevation:m=0,multiline:u=!1,rows:x=3,resize:b="vertical",label:z,description:B,error:C,invalid:D,startIcon:O,endIcon:R,loading:W=!1,fullWidth:I=!1,readOnly:L=!1,disabled:T=!1,type:A="text",className:E,style:F,...M},P){const q=null!=C&&!1!==C&&""!==C,G=D??q,H=G?"danger":c,J=n.useRef(null),K=n.useCallback(e=>{J.current=e,"function"==typeof P?P(e):P&&(P.current=e)},[P]),Q=[w,y[o],u?`${$[o]} items-start`:`${l[o]} items-center`,p[d][o],T?s[a]:L?j[a]:N[a]].filter(Boolean).join(" "),S=["min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",u?`block ${v[b]}`:"self-stretch"].join(" "),U="inline-flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)";return t(r.Root,{disabled:T,invalid:G,className:["flex-col align-top",h[o],I?"flex w-full":"inline-flex",E??""].filter(Boolean).join(" "),style:{...g(H,m),...F},children:[z?e(r.Label,{className:[f[o],"font-medium",T?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:z}):null,t("span",{className:Q,onPointerDown:e=>{e.target!==e.currentTarget||T||(e.preventDefault(),J.current?.focus())},children:[O?e("span",{className:U,children:O}):null,e(i,{ref:K,className:S,disabled:T,readOnly:L,"aria-busy":W||void 0,"data-loading":W||void 0,...u?{render:e("textarea",{rows:x})}:{type:A},...M}),W?e("span",{className:U,children:e(k,{})}):R?e("span",{className:U,children:R}):null]}),B?e(r.Description,{className:[f[o],"text-(--neba-muted-fg)"].join(" "),children:B}):null,q?e(r.Error,{match:!0,className:[f[o],"text-(--n-accent)"].join(" "),children:C}):null]})});

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

@@ -0,0 +1,2 @@
+export { TextField } from './TextField';
+export type { TextFieldProps, TextFieldResize } from './TextField';

package/dist/components/text-field/index.js

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

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";