neba 0.0.1 → 1.1.0

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import type { NebaAlign, NebaColor, NebaStyleProps, NebaVariant } from '../../types';
+/**
+ * Where the stack sits.
+ *
+ * Written as two words rather than as a `side` plus an `align` pair, because
+ * they are not independent: a toast stack is always pinned to the top or the
+ * bottom, never to a side, and offering `left`/`right` as a "side" would invite
+ * a stack down the middle of the screen that nothing in the layout survives.
+ * The second half is `NebaAlign`, the same word every other component uses.
+ */
+export type ToastPosition = `top-${NebaAlign}` | `bottom-${NebaAlign}`;
+/**
+ * The Neba style props a single toast can override, carried in Base UI's
+ * per-toast `data`. Anything not set here falls back to the provider.
+ */
+export interface ToastData {
+    color?: NebaColor;
+    variant?: NebaVariant;
+    icon?: React.ReactNode | false;
+}
+export interface ToastOptions extends ToastData {
+    /**
+     * Reusing an id updates that toast in place and restarts its timer, which is
+     * what "uploading… / uploaded" wants: one toast that changed its mind, not two
+     * stacked on each other.
+     */
+    id?: string;
+    /** The headline. */
+    title?: React.ReactNode;
+    /** The detail under it. A toast with only this is a one-line toast. */
+    description?: React.ReactNode;
+    /**
+     * How long before it dismisses itself, in milliseconds. `0` means it stays
+     * until it is closed — which is the right answer for anything the reader has
+     * to act on, because a toast that leaves before it is read said nothing.
+     */
+    timeout?: number;
+    /**
+     * `high` interrupts a screen reader; `low` waits for a pause. An error is
+     * worth interrupting for and a save confirmation is not.
+     * @default 'low'
+     */
+    priority?: 'low' | 'high';
+    /** The label of the action button. Passing it is what makes the button appear. */
+    actionLabel?: React.ReactNode;
+    onAction?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Called when the toast closes, however it closed. */
+    onClose?: () => void;
+    /** Called once it has finished animating out and left the DOM. */
+    onRemove?: () => void;
+}
+export interface ToastProviderProps extends Pick<NebaStyleProps, 'variant' | 'size' | 'density'> {
+    /** The default colour family. A single toast overrides it in `add`. */
+    color?: NebaColor;
+    /** @default 'bottom-end' */
+    position?: ToastPosition;
+    /**
+     * How long a toast lasts by default, in milliseconds. `0` keeps every toast
+     * up until it is closed.
+     * @default 5000
+     */
+    timeout?: number;
+    /**
+     * How many are shown at once. The rest are kept and revealed as the stack
+     * drains rather than being thrown away.
+     * @default 3
+     */
+    limit?: number;
+    /** How wide a toast is allowed to get. Numbers are pixels. @default 380 */
+    width?: number | string;
+    /** Accessible name of every toast's × button. */
+    closeLabel?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Raises toasts from anywhere under a `ToastProvider`.
+ *
+ * A hook rather than a component, because the thing a caller has at the moment
+ * a toast is warranted is a click handler, not a place in the tree — and a
+ * `<Toast open={…}/>` they would have to keep mounted, with a piece of state per
+ * message, is the shape this component exists to avoid.
+ */
+export declare function useToast(): {
+    /** Raises a toast and returns its id. */
+    add: (options: ToastOptions) => string;
+    /** Closes one toast, or every toast when called with nothing. */
+    close: (id?: string) => void;
+    /** Changes a toast already on screen. */
+    update: (id: string, options: ToastOptions) => void;
+    /**
+     * One toast that follows a promise: the loading message while it runs,
+     * then the success or the error. `timeout: 0` is applied to the loading
+     * state by Base UI, so a slow request cannot dismiss its own toast.
+     */
+    promise: <Value>(promise: Promise<Value>, options: {
+        loading: ToastOptions;
+        success: ToastOptions | ((value: Value) => ToastOptions);
+        error: ToastOptions | ((error: unknown) => ToastOptions);
+    }) => Promise<Value>;
+    /** Every toast currently in the stack, newest first. */
+    toasts: import("@base-ui/react").ToastObject<ToastData>[];
+};
+/**
+ * Puts the toast stack on the page and lets anything under it raise a message.
+ *
+ * Wrap the application once. Everything about how a toast *looks* is decided
+ * here — where the stack sits, how wide it is, which surface it wears, how long
+ * it lasts — so the call site stays the one thing it should be: what happened.
+ *
+ * Base UI owns the parts of this that are genuinely hard and invisible when
+ * they work: the timers and their pausing on hover and on window blur, the
+ * limit, the swipe, the F6 focus hotkey, and the live region that makes a
+ * message that appeared out of nowhere reach a screen reader at all.
+ */
+export declare function ToastProvider({ variant, size, color, density, position, timeout, limit, width, closeLabel, children }: ToastProviderProps): React.JSX.Element;

package/dist/components/toast/Toast.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as i}from"@base-ui/react/toast";import{boxPaddingClasses as n}from"../box/Box";import{CloseIcon as s,severityIcons as a}from"../../internal/icons";import{controlSlots as r,focusRingClasses as l,hasContent as c,iconClasses as d,metaTextClasses as p,radiusClasses as u,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetSectionGapClasses as b,sheetTitleClasses as x,surfaceClasses as v}from"../../internal/styles";const h={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 items-start flex-col-reverse","bottom-center":"bottom-0 items-center flex-col-reverse","bottom-end":"bottom-0 items-end flex-col-reverse"},y={solid:[v,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]"].join(" "),outline:[v,"border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" "),text:[v,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" ")},g={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"};function w(e){const{color:t,variant:o,icon:i,actionLabel:n,onAction:s,...a}=e;return{...a,data:{color:t,variant:o,icon:i},actionProps:void 0===n?void 0:{children:n,onClick:s}}}export function useToast(){const e=i.useToastManager();return o.useMemo(()=>({add:t=>e.add(w(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,w(o)),promise:(t,o)=>e.promise(t,{loading:w(o.loading),success:e=>w("function"==typeof o.success?o.success(e):o.success),error:e=>w("function"==typeof o.error?o.error(e):o.error)}),toasts:e.toasts}),[e])}function j({toast:o,variant:v,color:h,size:w,density:j,closeLabel:N,swipeDirection:_}){const T=o.data?.variant??v??"outline",z=o.data?.color??h,$=void 0===o.data?.icon?a[z]:o.data.icon,k=g[T],D=c(o.title);return t(i.Root,{toast:o,swipeDirection:_,className:["pointer-events-auto flex w-full items-start",n[j??"default"][w],u[w],b[w],m[w],y[T],d,"[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",l,"[outline:none]"].filter(Boolean).join(" "),style:r(z,3,T),children:[c($)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${k}`,children:$}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${f[w]}`,children:[e(i.Title,{className:`neba-title font-semibold ${x[w]} ${k}`}),e(i.Description,{className:D?""+("solid"===T?"":"text-(--neba-muted-fg)"):""})]}),e(i.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",k||"text-(--n-on-solid)","hover:underline","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",p[w]].join(" ")}),e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(i.Close,{"aria-label":N,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(s,{})})})]})}function N(t){const{toasts:o}=i.useToastManager(),{position:n,width:s,...a}=t,r=[n.startsWith("top")?"up":"down","left","right"];return e(i.Portal,{children:e(i.Viewport,{className:["neba-portal pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 p-4",h[n]].join(" "),children:o.map(t=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof s?`${s}px`:s},children:e(j,{toast:t,swipeDirection:r,...a})},t.id))})})}export function ToastProvider({variant:o="outline",size:n="md",color:s="primary",density:a="default",position:r="bottom-end",timeout:l=5e3,limit:c=3,width:d=380,closeLabel:p="Close",children:u}){return t(i.Provider,{timeout:l,limit:c,children:[u,e(N,{position:r,variant:o,size:n,color:s,density:a,width:d,closeLabel:p})]})}

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

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast } from './Toast';
+export type { ToastData, ToastOptions, ToastPosition, ToastProviderProps } from './Toast';

package/dist/components/toast/index.js

@@ -0,0 +1 @@
+export{ToastProvider,useToast}from"./Toast";

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

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Tooltip as BaseUITooltip } from '@base-ui/react/tooltip';
+import type { NebaAlign, NebaSide, NebaStyleProps } from '../../types';
+export interface TooltipProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'> {
+    /**
+     * What the tooltip says.
+     *
+     * A short phrase. A tooltip is not a container — it cannot be reached by a
+     * pointer on a touch screen, it disappears the moment attention moves, and
+     * anything inside it that could be clicked cannot be. Content that needs
+     * either of those is a Popover's job, not this one.
+     */
+    content: React.ReactNode;
+    /**
+     * The element the tooltip hangs off. Exactly one element, which must accept a
+     * ref and spread props — every Neba component does.
+     */
+    children: React.ReactElement;
+    /**
+     * Which edge of the trigger it appears on. May flip to the opposite side when
+     * there is no room, which is Base UI's doing and is the right behaviour.
+     * @default 'top'
+     */
+    side?: NebaSide;
+    /** Where it sits along that edge. @default 'center' */
+    align?: NebaAlign;
+    /** Distance from the trigger, in pixels. @default 6 */
+    sideOffset?: number;
+    /**
+     * How long the pointer has to rest before it opens, in milliseconds.
+     * @default 600
+     */
+    delay?: number;
+    /** How long it waits before closing once the pointer leaves. @default 0 */
+    closeDelay?: number;
+    /** Draws the little wedge pointing at the trigger. @default true */
+    arrow?: boolean;
+    /** Whether the tooltip is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Stops the tooltip from opening at all, without disabling the trigger. For
+     * the tooltip that only exists while a label is truncated.
+     * @default false
+     */
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Shares one delay across a group of tooltips: once any of them has opened, its
+ * neighbours open instantly, and the wait comes back after a pause.
+ *
+ * Worth wrapping a toolbar in. Without it, moving along a row of icon buttons
+ * means waiting out the full delay at every stop, which is what makes tooltips
+ * feel like they are fighting the pointer.
+ */
+export declare const TooltipProvider: React.FC<import("@base-ui/react").TooltipProviderProps>;
+export type TooltipProviderProps = React.ComponentProps<typeof BaseUITooltip.Provider>;
+/**
+ * A short label that appears when the pointer rests on something.
+ *
+ * The whole component is a wrapper: `<Tooltip content="Copy"><Button …/></Tooltip>`.
+ * Base UI's Trigger merges itself onto the child rather than rendering a box of
+ * its own, so the tooltip adds no element to the layout and the child stays
+ * whatever it was — a button, a chip, a truncated cell.
+ *
+ * Base UI owns the parts that are genuinely hard: the delay and the group
+ * timeout, opening on focus but not on a focus that came from a click, closing
+ * on Escape, and keeping the popup off the edges of the window.
+ *
+ * The one thing it deliberately leaves open is the part that makes a tooltip
+ * mean anything to a screen reader — `role="tooltip"` on the plate and an
+ * `aria-describedby` pointing at it from the trigger — because a popup can be
+ * many things and only the caller knows which. Here it is always a tooltip, so
+ * this component wires both, and drops the reference while it is closed rather
+ * than pointing at an element that is not in the document.
+ */
+export declare function Tooltip({ content, children, size, color, density, side, align, sideOffset, delay, closeDelay, arrow, open, defaultOpen, onOpenChange, disabled, className, style }: TooltipProps): React.JSX.Element;

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tooltip as o}from"@base-ui/react/tooltip";import{controlSlots as i,metaTextClasses as s,paddingXClasses as n,radiusClasses as l,surfaceClasses as r}from"../../internal/styles";export const TooltipProvider=o.Provider;const d=[r,"max-w-64 text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[instant]:[transition-duration:0ms]"].join(" "),p={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},c={xs:6,sm:7,md:8,lg:9,xl:10};export function Tooltip({content:r,children:m,size:h="sm",color:y="secondary",density:f="default",side:x="top",align:b="center",sideOffset:g=6,delay:u,closeDelay:v,arrow:w=!0,open:j,defaultOpen:O,onOpenChange:N,disabled:P=!1,className:T,style:z}){const B=c[h],C=a.useId(),[D,_]=a.useState(O??!1),k=j??D;return t(o.Root,{open:j,defaultOpen:O,onOpenChange:e=>{_(e),N?.(e)},children:[e(o.Trigger,{render:m,delay:u,closeDelay:v,disabled:P,"aria-describedby":k?C:void 0}),e(o.Portal,{children:e(o.Positioner,{className:"neba-portal z-50 [outline:none]",side:x,align:b,sideOffset:g,children:t(o.Popup,{id:C,role:"tooltip",className:[d,l[h],n[f][h],p[h],s[h],T??""].filter(Boolean).join(" "),style:{...i(y,3,"solid"),...z},children:[w?e(o.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:e("svg",{width:B,height:B/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--n-fill)"})})}):null,r]})})})]})}

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

@@ -0,0 +1,2 @@
+export { Tooltip, TooltipProvider } from './Tooltip';
+export type { TooltipProps, TooltipProviderProps } from './Tooltip';

package/dist/components/tooltip/index.js

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

package/dist/components/typography/Typography.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaColor } from '../../types';
+/**
+ * What a piece of text *is*, which decides both its type scale and the element
+ * it renders as.
+ *
+ * This is deliberately not called `variant`. In this library `variant` means the
+ * weight of a surface — `solid` / `outline` / `text` — and a second meaning for
+ * the same word is exactly what the prop conventions forbid.
+ */
+export type TypographyLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'lead' | 'caption' | 'overline';
+export type TypographyAlign = 'start' | 'center' | 'end' | 'justify';
+export type TypographyWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+export interface TypographyProps extends Omit<React.ComponentPropsWithoutRef<'p'>, 'color' | 'children'> {
+    /**
+     * The type scale, and the element that carries it. `h1`–`h6` render the
+     * matching heading, `lead`/`body` a `<p>`, `caption`/`overline` a `<span>`.
+     * @default 'body'
+     */
+    level?: TypographyLevel;
+    /**
+     * Semantic colour role. Unlike every other component this has **no default**:
+     * text inherits the page's own colour unless a role is asked for, because the
+     * common case for a paragraph is to look like the paragraphs around it.
+     */
+    color?: NebaColor;
+    /** Overrides the weight the level would otherwise pick. */
+    weight?: TypographyWeight;
+    align?: TypographyAlign;
+    /**
+     * Clamps the text to this many lines with an ellipsis. `1` is a single-line
+     * truncation. Omit it and the text wraps as far as it needs to.
+     */
+    lines?: number;
+    /**
+     * Adds the space below that a run of prose expects. Off by default: a library
+     * component that injects margins is one a layout has to fight.
+     * @default false
+     */
+    gutter?: boolean;
+    /**
+     * Renders a different element without changing the type scale — a `h2`-sized
+     * line that is semantically a `<p>`, or the other way round. Base UI's own
+     * escape hatch, so it behaves the same here as on Box.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Text at one of the library's sizes.
+ *
+ * The type scale is the one thing in a design system that everything else is
+ * measured against, and until now it only existed inside the components that
+ * happened to need it — a Card's title, a TextField's label. This is that ladder
+ * on its own, so a page can use it without wrapping its prose in a card.
+ *
+ * `level` sets the scale *and* the element, which is the common case. When they
+ * have to differ — a subheading that should not enter the document outline, a
+ * `<p>` that has to look like an `h3` — `render` breaks the tie.
+ */
+export declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;

package/dist/components/typography/Typography.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const r={h1:"text-[1.875rem]/[2.25rem] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.875rem] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.625rem] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.5rem]",h5:"text-[0.9375rem]/[1.375rem]",h6:"text-[0.8125rem]/[1.25rem]",lead:"text-[1.0625rem]/[1.75rem]",body:"text-[0.8125rem]/[1.375rem]",caption:"text-[0.75rem]/[1.125rem]",overline:"text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase"},m={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},n={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},a=new Set(["caption","overline"]),l={h1:"mb-4",h2:"mb-3.5",h3:"mb-3",h4:"mb-2.5",h5:"mb-2",h6:"mb-2",lead:"mb-4",body:"mb-3",caption:"mb-2",overline:"mb-2"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"},c={1:"truncate",2:"line-clamp-2",3:"line-clamp-3",4:"line-clamp-4",5:"line-clamp-5",6:"line-clamp-6"};export const Typography=e.forwardRef(function({level:h="body",color:d,weight:s,align:b,lines:p,gutter:x=!1,render:u,className:f,style:g,children:y,...v},k){const j=[r[h],o[s??m[h]],b?i[b]:"",p?c[p]??"line-clamp-6":"",x?l[h]:"",d?"text-(--n-accent)":a.has(h)?"text-(--neba-muted-fg)":"text-(--neba-fg)",f??""].filter(Boolean).join(" ");return t({render:u??e.createElement(n[h]),ref:k,props:{className:j,style:d?{"--n-accent":`var(--neba-${d}-accent)`,...g}:g,children:y,...v}})});

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

@@ -0,0 +1,2 @@
+export { Typography } from './Typography';
+export type { TypographyAlign, TypographyLevel, TypographyProps, TypographyWeight } from './Typography';

package/dist/components/typography/index.js

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

package/dist/index.d.ts

@@ -1 +1,50 @@
-export * from './components/button/index.js';
+export * from './types';
+export * from './components/accordion';
+export * from './components/alert';
+export * from './components/badge';
+export * from './components/blockquote';
+export * from './components/box';
+export * from './components/button';
+export * from './components/button-group';
+export * from './components/card';
+export * from './components/carousel';
+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/overlay';
+export * from './components/pagination';
+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/statistic';
+export * from './components/switch';
+export * from './components/table';
+export * from './components/tabs';
+export * from './components/text-field';
+export * from './components/time-picker';
+export * from './components/timeline';
+export * from './components/toast';
+export * from './components/toolbar';
+export * from './components/tooltip';
+export * from './components/typography';

package/dist/index.js

@@ -1 +1 @@
-export*from"./components/button/index.js";
+export*from"./types";export*from"./components/accordion";export*from"./components/alert";export*from"./components/badge";export*from"./components/blockquote";export*from"./components/box";export*from"./components/button";export*from"./components/button-group";export*from"./components/card";export*from"./components/carousel";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/overlay";export*from"./components/pagination";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/statistic";export*from"./components/switch";export*from"./components/table";export*from"./components/tabs";export*from"./components/text-field";export*from"./components/time-picker";export*from"./components/timeline";export*from"./components/toast";export*from"./components/toolbar";export*from"./components/tooltip";export*from"./components/typography";

package/dist/internal/button-group.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { NebaColor, NebaDensity, NebaElevation, NebaSize, NebaVariant } from '../types';
+/**
+ * What a Button inherits from the ButtonGroup around it.
+ *
+ * The alternative — `React.Children.map` with `cloneElement` — breaks the moment
+ * a caller wraps one of the buttons in a Tooltip, a `<Fragment>` or a `.map()`,
+ * which is most of the time. A context reaches the Button wherever it ended up.
+ *
+ * Every field is optional and every one of them means "not specified": a Button
+ * falls back to its own default rather than to a value the group invented, so
+ * `<ButtonGroup>` with no props changes nothing except the corners.
+ *
+ * It lives in `internal/` rather than in the button-group folder so that Button
+ * can read it without the two components importing each other.
+ */
+export interface ButtonGroupContextValue {
+    variant?: NebaVariant;
+    size?: NebaSize;
+    color?: NebaColor;
+    density?: NebaDensity;
+    elevation?: NebaElevation;
+    disabled?: boolean;
+}
+export declare const ButtonGroupContext: React.Context<ButtonGroupContextValue | null>;

package/dist/internal/button-group.js

@@ -0,0 +1 @@
+import*as t from"react";export const ButtonGroupContext=t.createContext(null);

package/dist/internal/calendar.d.ts

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