neba 1.1.0 → 1.3.0

package/dist/components/panes/Panes.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import type { NebaColor, NebaOrientation, NebaSize } from '../../types';
+/**
+ * A pane's share of the split, as a percentage of the container or as a CSS
+ * length.
+ *
+ * A bare number is a percentage — that is what a split is usually described in,
+ * and a percentage keeps its meaning when the window changes size. A string is
+ * an absolute length (`'240px'`, `'15rem'`, `'20%'`), which is what a sidebar
+ * with a minimum actually needs: "at least 200 pixels" does not survive being
+ * written down as a percentage of a width nobody knows yet.
+ */
+export type PaneSize = number | string;
+export interface PanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the panes run. `horizontal` puts them side by side with upright
+     * handles between them; `vertical` stacks them.
+     * @default 'horizontal'
+     */
+    orientation?: NebaOrientation;
+    /**
+     * Whether the handles between the panes can be dragged. Turn it off for a
+     * split that is a layout rather than a control.
+     * @default true
+     */
+    resizable?: boolean;
+    /** The colour family the handles light up in. @default 'primary' */
+    color?: NebaColor;
+    /** How thick a handle is, and how far it reaches. @default 'md' */
+    size?: NebaSize;
+    /** Fires with every pane's share, in percent, while a handle is dragged. */
+    onResize?: (sizes: number[]) => void;
+    /** Fires once, with the same shape, when the handle is let go. */
+    onResizeEnd?: (sizes: number[]) => void;
+    /** The Panes. Anything that is not a Pane is still laid out, but has no size. */
+    children?: React.ReactNode;
+}
+export interface PaneProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * The share this pane starts with. Panes with no `defaultSize` split whatever
+     * is left over equally.
+     */
+    defaultSize?: PaneSize;
+    /** How small it may be dragged. @default 0 */
+    minSize?: PaneSize;
+    /** How large it may be dragged. Unbounded when left out. */
+    maxSize?: PaneSize;
+    /** What is inside the pane. */
+    children?: React.ReactNode;
+}
+/**
+ * A set of panes with draggable handles between them.
+ *
+ * The panes are sized in **fractions**, written out as
+ * `flex-basis: calc((100% - gutters) * fraction)`. That is the one decision the
+ * rest of this file follows from: a split described in percentages survives the
+ * window being resized without a single line of JavaScript running, so the
+ * component measures itself only twice — once on mount, to turn a `'240px'`
+ * default into a fraction, and once at the start of each drag, to know what a
+ * pixel of pointer movement is worth.
+ *
+ * The handles are interleaved here rather than written by the caller, so the
+ * children of a Panes are just panes. That does mean the direct children have to
+ * *be* Panes: the constraints are read off their props, and a Pane wrapped in
+ * something else is a pane with no minimum.
+ */
+export declare const Panes: React.ForwardRefExoticComponent<PanesProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One region of a split.
+ *
+ * It carries no surface of its own on purpose: a Panes is layout, and the moment
+ * a pane drew a sheet it would stop being usable as the thing a Card, a Table or
+ * an editor is put inside. Put a Box or a Card in it when a surface is wanted.
+ *
+ * `defaultSize`, `minSize` and `maxSize` are read by the Panes around it rather
+ * than used here — a pane cannot know what "half" is, only the split can.
+ */
+export declare const Pane: React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/panes/Panes.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{cx as r,transitionClasses as o}from"../../internal/styles";const i=n.createContext({basis:null}),a={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},s={xs:4,sm:6,md:8,lg:10,xl:12};function l(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const o=Number(r[1]);if(!Number.isNaN(o))switch(r[2]){case"px":return o;case"%":return t*o/100;case"rem":return o*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return o*parseFloat(n&&getComputedStyle(n).fontSize||"16");default:return}}export const Panes=n.forwardRef(function({orientation:c="horizontal",resizable:u=!0,color:d="primary",size:m="md",onResize:f,onResizeEnd:p,className:h,style:g,children:v,...x},b){const y=n.Children.toArray(v).filter(n.isValidElement),z=y.length,w=n.useRef(null),S=n.useCallback(e=>{w.current=e,"function"==typeof b?b(e):b&&(b.current=e)},[b]),R=n.useRef([]);R.current=y.map(e=>e.props);const[C,E]=n.useState(null),N=C&&C.length===z?C:null,M=n.useRef(null);M.current=N;const L="horizontal"===c,$=s[m]*Math.max(0,z-1);function k(e){const t=w.current,n=M.current;if(!u||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(L?r.width:r.height)-$;if(o<=0)return null;const i=R.current[e],a=R.current[e+1],s=n[e]*o,c=s+n[e+1]*o,d=Math.max(l(i?.minSize,o,t)??0,c-(l(a?.maxSize,o,t)??c)),m=Math.min(l(i?.maxSize,o,t)??c,c-(l(a?.minSize,o,t)??0));return m<d?null:{root:t,current:n,extent:o,start:s,pair:c,resize(t){const r=Math.min(m,Math.max(d,s+t)),i=[...n];return i[e]=r/o,i[e+1]=(c-r)/o,E(i),f?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=w.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(L?t.width:t.height)-$;n<=0||E(t=>t&&t.length===z?t:function(e,t,n){const r=e.map(e=>l(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,s=r.map(e=>Math.max(0,e??a)),c=s.reduce((e,t)=>e+t,0);return c<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/c)}(R.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[z,L,$]);const A=r("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",a[m],o,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0",u?r(L?"cursor-col-resize":"cursor-row-resize","hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)"):"");return e("div",{ref:S,className:r("flex h-full w-full",L?"flex-row":"flex-col","min-h-0 min-w-0",h),style:{"--n-accent":`var(--neba-${d}-accent)`,"--n-soft":`var(--neba-${d}-soft)`,"--n-ring":`var(--neba-${d}-ring)`,...g},...x,children:y.map((a,s)=>t(n.Fragment,{children:[s>0?e("div",{role:"separator","aria-orientation":L?"vertical":"horizontal","aria-valuenow":N?Math.round(100*N[s-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!u||void 0,tabIndex:u?0:-1,className:A,onPointerDown:e=>{0===e.button&&function(e,t){const n=k(e);if(!n)return;const r=t.currentTarget;r.setPointerCapture(t.pointerId),r.dataset.dragging="true";const o=document.body.style.userSelect;document.body.style.userSelect="none";const i=L?t.clientX:t.clientY,a=L&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=L?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,p?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(s-1,e)},onKeyDown:e=>{const t=L?"ArrowLeft":"ArrowUp",n=L?"ArrowRight":"ArrowDown";e.key!==t&&e.key!==n||(e.preventDefault(),function(e,t){const n=k(e);if(!n)return;const r=n.resize(t);p?.(r.map(e=>100*e))}(s-1,e.key===n?16:-16))},children:e("span",{"aria-hidden":"true",className:r("pointer-events-none bg-(--neba-border)",o,L?"h-full w-px":"h-px w-full",u?"group-hover/handle:bg-(--n-accent) group-focus-visible/handle:bg-(--n-accent) group-data-[dragging]/handle:bg-(--n-accent)":"")})}):null,e(i.Provider,{value:{basis:N?`calc((100% - ${$}px) * ${N[s].toFixed(6)})`:null},children:a})]},a.key??s))})});export const Pane=n.forwardRef(function({defaultSize:t,minSize:o,maxSize:a,className:s,style:l,children:c,...u},d){const{basis:m}=n.useContext(i);return e("div",{ref:d,className:r("relative min-h-0 min-w-0 overflow-auto",s),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:c})});

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

@@ -0,0 +1,2 @@
+export { Pane, Panes } from './Panes';
+export type { PaneProps, PaneSize, PanesProps } from './Panes';

package/dist/components/panes/index.js

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

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { Popover as BaseUIPopover } from '@base-ui/react/popover';
+import type { NebaAlign, NebaSide, NebaStyleProps } from '../../types';
+/**
+ * A popover takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant` — the three weights answer "how much does this surface
+ * assert itself against the page", and a popup that had to be asked for has
+ * already been asserted. There is no `elevation` either: a popover floats over
+ * the page by definition, so it carries a shadow at level 3 and a prop that
+ * could sit it flat would be a prop that could stop it being a popover.
+ */
+export interface PopoverProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'> {
+    /**
+     * The element the popup hangs off and that opens it. Exactly one element,
+     * which must accept a ref and spread props — every Neba component does.
+     *
+     * Optional: a controlled popover anchored from elsewhere needs none, though it
+     * then has nothing to position against and will sit against the viewport.
+     */
+    trigger?: React.ReactElement;
+    /** The heading, rendered as the element that names the popup. */
+    title?: React.ReactNode;
+    /** A line under the title, and the popup's accessible description. */
+    description?: React.ReactNode;
+    /** The body. */
+    children?: React.ReactNode;
+    /**
+     * Which edge of the trigger it appears on. Flips to the opposite side when
+     * there is no room, which is Base UI's doing and is the right behaviour.
+     * @default 'bottom'
+     */
+    side?: NebaSide;
+    /** Where it sits along that edge. @default 'center' */
+    align?: NebaAlign;
+    /** Distance from the trigger, in pixels. @default 6 */
+    sideOffset?: number;
+    /** Shift along that edge, in pixels. @default 0 */
+    alignOffset?: number;
+    /**
+     * Draws the little wedge pointing at the trigger.
+     *
+     * Off by default, unlike on [Tooltip](../feedback/tooltip). A tooltip is a
+     * filled plate and its wedge is the same solid colour; this surface is
+     * translucent over a blurred backdrop, and a wedge sticking out past the
+     * popup's own box cannot carry that backdrop with it. Turn it on where the
+     * trigger is far enough away that the popup needs to say what it belongs to.
+     * @default false
+     */
+    arrow?: boolean;
+    /** Whether the popover 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;
+    /**
+     * Whether the page behind is taken away. `false` — the default — leaves the
+     * page scrollable and clickable, which is what separates a popover from a
+     * [Dialog](../feedback/dialog): it is a detail beside the page, not instead of
+     * it. `'trap-focus'` holds focus inside without locking the scroll.
+     * @default false
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether pressing Escape or clicking outside closes the popup. Turn it off
+     * only for a popup with its own way out, because there will be no other.
+     * @default true
+     */
+    dismissible?: boolean;
+    /** Shows the × in the corner. @default false */
+    showClose?: boolean;
+    /** Accessible name of the × button. */
+    closeLabel?: string;
+    /**
+     * A hard cap on the popup's width, overriding the one `size` implies. Numbers
+     * are pixels. For the popover whose content decides its width — a form, a
+     * single line of help — rather than for tuning the scale, which is `size`.
+     */
+    width?: number | string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export type PopoverCloseProps = React.ComponentPropsWithoutRef<typeof BaseUIPopover.Close>;
+/**
+ * Closes the popover it is inside.
+ *
+ * Exported for the reason `DialogClose` is: an uncontrolled popover has no
+ * `setOpen` for its Cancel button to call, and making every popover controlled
+ * is a piece of state per popover that exists only to answer a button.
+ *
+ * `render` is Base UI's own escape hatch, so a real Neba button dismisses:
+ * `<PopoverClose render={<Button variant="text">Cancel</Button>} />`.
+ */
+export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A sheet that opens beside the thing that opened it.
+ *
+ * The difference from a [Tooltip](../feedback/tooltip) is that this one can be
+ * reached: it stays up until it is dismissed, it can be entered with the
+ * pointer or the keyboard, and what is inside it can be clicked and typed into.
+ * The difference from a [Dialog](../feedback/dialog) is that it does not take
+ * the page — it is anchored to a control, and the page behind goes on working.
+ *
+ * Base UI owns everything hard about it: the anchoring and the flip at the
+ * window edge, the click-outside and Escape, returning focus to the trigger, and
+ * the `aria-labelledby` / `aria-describedby` wiring. What is left here is the
+ * surface, the width ladder and the header.
+ */
+export declare function Popover({ size, color, density, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, width, className, style }: PopoverProps): React.JSX.Element;

package/dist/components/popover/Popover.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Popover as o}from"@base-ui/react/popover";import{boxPaddingXClasses as t,boxPaddingYClasses as n}from"../box/Box";import{CloseIcon as s}from"../../internal/icons";import{hasContent as i,metaTextClasses as l,radiusClasses as r,sheetBodyClasses as d,sheetHeaderGapClasses as c,sheetSectionGapClasses as m,sheetTitleClasses as p,surfaceClasses as f,surfaceSlots as u}from"../../internal/styles";const h={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},x=[f,"relative flex flex-col","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),b={xs:8,sm:9,md:10,lg:11,xl:12};export const PopoverClose=o.Close;export function Popover({size:f="md",color:g="primary",density:v="default",trigger:w,title:y,description:N,children:_,side:k="bottom",align:j="center",sideOffset:O=6,alignOffset:C=0,arrow:P=!1,open:z,defaultOpen:$,onOpenChange:B,modal:L=!1,dismissible:M=!0,showClose:T=!1,closeLabel:W="Close",width:A,className:D,style:E}){const R=t[v][f],q=n[v][f],F=b[f],G=i(y)||i(N);return a(o.Root,{open:z,defaultOpen:$,modal:L,onOpenChange:(e,a)=>{M||e||"escape-key"!==a.reason&&"outside-press"!==a.reason&&"focus-out"!==a.reason?B?.(e):a.cancel()},children:[w?e(o.Trigger,{render:w}):null,e(o.Portal,{children:e(o.Positioner,{className:"neba-portal z-50 [outline:none]",side:k,align:j,sideOffset:O,alignOffset:C,children:a(o.Popup,{className:[x,r[f],d[f],m[f],R,q,void 0===A?h[f]:"",D??""].filter(Boolean).join(" "),style:{...u(g,3),...void 0===A?null:{maxWidth:"number"==typeof A?`${A}px`:A},...E},children:[P?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:a("svg",{width:F,height:F/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--n-panel-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--n-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,G||T?a("div",{className:"flex shrink-0 items-start gap-3",children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${c[f]}`,children:[i(y)?e(o.Title,{className:`m-0 font-semibold ${p[f]}`,children:y}):null,i(N)?e(o.Description,{className:`m-0 text-(--neba-muted-fg) ${l[f]}`,children:N}):null]}),T?e(o.Close,{"aria-label":W,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(s,{})}):null]}):null,i(_)?e("div",{className:"min-w-0",children:_}):null]})})})]})}

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

@@ -0,0 +1,2 @@
+export { Popover, PopoverClose } from './Popover';
+export type { PopoverCloseProps, PopoverProps } from './Popover';

package/dist/components/popover/index.js

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

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaColor, NebaSize } from '../../types';
+/**
+ * What the placeholder is standing in for.
+ *
+ * - `line` — a run of text. Sized off the type scale, so a `md` line is exactly
+ *   as tall as the `md` type it will be replaced by.
+ * - `rect` — a block: an image, a chart, a card, a map.
+ * - `circle` — an avatar, or anything else round.
+ */
+export type NebaSkeletonShape = 'line' | 'rect' | 'circle';
+export interface SkeletonProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @default 'line' */
+    shape?: NebaSkeletonShape;
+    /**
+     * How many lines to draw, for `shape="line"`. The last one is drawn short, the
+     * way the last line of a paragraph is, so a block of them reads as prose
+     * rather than as a barcode. Ignored by the other two shapes.
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * The scale of the thing being stood in for: the type scale for a `line`, the
+     * diameter for a `circle`, the default block height for a `rect`.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /**
+     * Colour family. `secondary` by default, and it is worth leaving there: a
+     * placeholder that carries a semantic colour is saying something about content
+     * that has not arrived yet.
+     * @default 'secondary'
+     */
+    color?: NebaColor;
+    /** An explicit width. Numbers are pixels. */
+    width?: number | string;
+    /** An explicit height. Numbers are pixels. */
+    height?: number | string;
+    /**
+     * The travelling highlight. Turn it off for a page holding dozens of them, or
+     * where the wait is expected to be long enough that motion becomes noise.
+     *
+     * A reduced-motion preference already replaces the sweep with a colour pulse
+     * without being asked, so this is not the accessibility switch.
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * What a screen reader is told, if anything.
+     *
+     * Unset — the default — the placeholder is `aria-hidden`, because a dozen
+     * boxes each announcing themselves is worse than silence. Give the *one*
+     * skeleton that stands for the whole region a label and it becomes a live
+     * `status` instead.
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<div>`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+}
+/**
+ * The shape of something that has not loaded yet.
+ *
+ * It reserves the space the real thing will take, which is the whole job: a card
+ * that grows by 200px when its image arrives has moved everything below it while
+ * somebody was reading. A spinner cannot do that, which is why this is not a
+ * [ProgressCircular](../feedback/progress-circular) in a box.
+ *
+ * The three shapes are the three things a layout is made of — a run of text, a
+ * block and a circle — and each is sized off the ladder the real component uses,
+ * so a `md` line is as tall as `md` type and a `md` circle is exactly an
+ * [Avatar](../display/avatar) at `md`.
+ */
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{controlHeightClasses as n,controlSquareClasses as d,surfaceSlots as o}from"../../internal/styles";const a={xs:"h-[0.6875rem]",sm:"h-[0.75rem]",md:"h-[0.8125rem]",lg:"h-[0.9375rem]",xl:"h-[1.0625rem]"},s={xs:"gap-[0.3125rem]",sm:"gap-[0.375rem]",md:"gap-[0.5625rem]",lg:"gap-[0.5625rem]",xl:"gap-[0.6875rem]"},m={xs:"rounded-[0.3125rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"},i={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},t={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"},u="relative overflow-hidden bg-(--n-soft-hover)";function f(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const Skeleton=r.forwardRef(function({shape:r="line",lines:h=1,size:c="md",color:x="secondary",width:g,height:p,animated:b=!0,label:w,render:y,className:$,style:v,...j},k){const N=b?"neba-skeleton":"",B="circle"===r?`rounded-full ${n[c]} ${d[c]} shrink-0`:"rect"===r?`w-full ${t[c]} ${void 0===p?i[c]:""}`:`w-full ${m[c]} ${a[c]}`,z=w?{role:"status","aria-busy":!0,"aria-label":w}:{"aria-hidden":!0},A="line"===r&&h>1;return l({render:y,ref:k,props:{className:(A?["flex w-full flex-col",s[c],$??""]:[u,N,B,$??""]).filter(Boolean).join(" "),style:{...o(x,0),width:f(g),height:f(p),...v},...z,...A?{children:Array.from({length:h},(r,l)=>e("div",{className:[u,N,m[c],a[c],l===h-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...j}})});

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

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { NebaSkeletonShape, SkeletonProps } from './Skeleton';

package/dist/components/skeleton/index.js

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

package/dist/components/spoiler/Spoiler.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import type { NebaColor, NebaDensity, NebaElevation, NebaSize, NebaVariant } from '../../types';
+export interface SpoilerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onChange'> {
+    /** Whether the content is uncovered. Pass it to drive the Spoiler yourself. */
+    revealed?: boolean;
+    /**
+     * Where an uncontrolled Spoiler starts.
+     * @default false
+     */
+    defaultRevealed?: boolean;
+    /** Called when the reveal or hide button is pressed. */
+    onRevealedChange?: (revealed: boolean) => void;
+    /**
+     * Which language the default label and notice are written in — a BCP 47 tag
+     * such as `ko`, `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     *
+     * Both strings can be written out instead, in `label` and `description`; this
+     * is for the far more common case where the page already knows its language
+     * and nobody should have to translate a button that says "Reveal".
+     */
+    locale?: string;
+    /** The reveal button's label. Defaults to the `locale`'s word for it. */
+    label?: React.ReactNode;
+    /** The hide button's label, when `reversible` is on. */
+    hideLabel?: React.ReactNode;
+    /**
+     * The line above the button, saying why the content is covered. Defaults to
+     * the `locale`'s wording; pass `false` for a cover with nothing written on it.
+     */
+    description?: React.ReactNode | false;
+    /**
+     * Replaces the default reveal button entirely.
+     *
+     * The replacement is yours to wire up: pass `revealed` and
+     * `onRevealedChange` and drive it from your own control. `label` is the prop
+     * for the far commoner case of wanting different words on the button that is
+     * already there.
+     */
+    action?: React.ReactNode;
+    /**
+     * Keeps the content coverable: once revealed, a hide button appears under it.
+     * @default false
+     */
+    reversible?: boolean;
+    /**
+     * Clamps the covered box to this height — a CSS length, or a number in
+     * pixels. Revealing releases it and the content takes whatever height it
+     * needs.
+     *
+     * Left out, the box is exactly as tall as what it holds, which is the right
+     * default for a paragraph or a picture. Set it for something long enough that
+     * a page of blurred content would be a page of nothing.
+     */
+    maxHeight?: number | string;
+    /**
+     * How hard the content is blurred, in pixels.
+     * @default 10
+     */
+    blur?: number;
+    /**
+     * Inner padding around the content, on Box's own `size`/`density` scale. Turn
+     * it off for something that should reach the edges — a picture, a video.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * Weight of the box's surface. `text` draws no box at all, which is what a
+     * spoiler sitting inside running prose usually wants.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /** The sheet's radius, and the size of the button on it. @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** Padding around the cover's own text and button. @default 'default' */
+    density?: NebaDensity;
+    /** Drop shadow depth. `0` (the default) is flat. @default 0 */
+    elevation?: NebaElevation;
+    /** What is being covered. */
+    children?: React.ReactNode;
+}
+/**
+ * Content that is covered until somebody asks for it.
+ *
+ * The cover is a blur rather than a `display: none`, which is the whole point:
+ * a reader can see that there is something there, roughly how much of it there
+ * is, and — with `maxHeight` — that it has been clamped. What they cannot do is
+ * read it by accident, which is the one thing a spoiler is for.
+ *
+ * While it is covered the content is `inert`, so it is not tabbable, not
+ * readable by a screen reader and not selectable by a drag across the page. A
+ * spoiler that could be defeated by Ctrl-A is not a spoiler.
+ */
+export declare const Spoiler: React.ForwardRefExoticComponent<SpoilerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/spoiler/Spoiler.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{Button as n}from"../button/Button";import{useMessages as o}from"../../internal/i18n";import{boxPaddingClasses as a,boxPaddingXClasses as l,boxPaddingYClasses as t}from"../box/Box";import{hasContent as s,metaTextClasses as d,radiusClasses as c,surfaceClasses as m,surfaceSlots as v,transitionClasses as f}from"../../internal/styles";const p={solid:[m,"bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[m,"border bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"bg-transparent"},u="[background-color:color-mix(in_oklab,var(--neba-surface)_55%,transparent)]";export const Spoiler=i.forwardRef(function({revealed:m,defaultRevealed:b=!1,onRevealedChange:x,locale:h,label:j,hideLabel:g,description:y,action:w,reversible:N=!1,maxHeight:k,blur:z=10,padded:B=!0,variant:_="outline",size:C="md",color:R="primary",density:H="default",elevation:S=0,className:$,style:I,children:L,...q},A){const D=o(h),E=i.useId(),[F,G]=i.useState(b),J=m??F,K=e=>{void 0===m&&G(e),x?.(e)},M=!1===y?null:y??D.spoiler.notice;return r("div",{ref:A,className:["relative isolate overflow-hidden",c[C],p[_],f,$??""].filter(Boolean).join(" "),style:{...v(R,S),...I},...q,children:[e("div",{id:E,className:["min-w-0",B?a[H][C]:"","[transition:filter_var(--neba-duration-fill)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]",J?"":"select-none"].filter(Boolean).join(" "),style:{filter:J?void 0:`blur(${z}px)`,maxHeight:J?void 0:k,overflow:J?void 0:"hidden"},inert:!J,children:L}),J?null:r("div",{className:["absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 text-center",a[H][C],u].join(" "),children:[s(M)?e("p",{className:`m-0 text-(--neba-muted-fg) ${d[C]}`,children:M}):null,w??e(n,{size:C,color:R,density:H,onClick:()=>K(!0),"aria-expanded":!1,"aria-controls":E,children:j??D.spoiler.reveal})]}),J&&N?e("div",{className:["flex justify-end",l[H][C],t[H][C],"pt-0"].join(" "),children:e(n,{variant:"text",size:C,color:R,density:H,onClick:()=>K(!1),"aria-expanded":!0,"aria-controls":E,children:g??D.spoiler.hide})}):null]})});

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

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

package/dist/components/spoiler/index.js

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

package/dist/components/text-link/TextLink.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaColor, NebaSize } from '../../types';
+/**
+ * When the line under a link is drawn.
+ *
+ * `always` is the default, and the reason is `color`: a TextLink takes no
+ * colour family unless one is asked for, so with the line off there would be
+ * nothing at all distinguishing a link from the sentence it sits in. That is
+ * also why this is not a boolean — "no underline" is a real choice for a link
+ * in a nav bar or a footer, where position already says what it is, and it
+ * should have to be spelled out rather than fallen into.
+ */
+export type TextLinkUnderline = 'always' | 'hover' | 'none';
+export interface TextLinkProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color'> {
+    /** Where the link goes. */
+    href: string;
+    /**
+     * When the underline is drawn.
+     * @default 'always'
+     */
+    underline?: TextLinkUnderline;
+    /**
+     * Semantic colour role. Like [Typography](../display/typography) and unlike
+     * every control in the library this has **no default** — a link in a
+     * paragraph is usually the paragraph's own colour with a line under it, and a
+     * component that arrived pre-dyed is one a page has to undo.
+     */
+    color?: NebaColor;
+    /**
+     * The type scale. Also no default: a link inside a sentence is the size of
+     * the sentence. Set it for a link that stands on its own.
+     */
+    size?: NebaSize;
+    /**
+     * Opens the link in a new tab, with the `rel` that keeps the new page from
+     * reaching back into this one.
+     *
+     * A window changing under the reader is the one thing about a link that
+     * cannot be seen before it happens, so this also turns `icon` on by default
+     * and adds a line for a screen reader — see `locale`.
+     * @default false
+     */
+    newTab?: boolean;
+    /**
+     * The mark after the label. `true` draws the arrow leaving its box when
+     * `newTab` is on and the chain otherwise, `false` draws nothing, and a node
+     * of your own replaces the glyph.
+     *
+     * Left out, it follows `newTab`.
+     */
+    icon?: React.ReactNode | boolean;
+    /**
+     * Which language the line for a screen reader is written in — a BCP 47 tag
+     * such as `ko`, `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     *
+     * Only `newTab` produces that line; a link without it says nothing of its
+     * own, so this changes nothing.
+     */
+    locale?: string;
+    /**
+     * Renders something other than an `<a>` — the `Link` a router brings, most
+     * of the time. `href` still goes through, so `render={<NextLink href="…" />}`
+     * needs it written once, on the TextLink.
+     */
+    render?: useRender.RenderProp;
+    /** The label. */
+    children?: React.ReactNode;
+}
+/**
+ * A link, in a sentence or on its own.
+ *
+ * Everything about it is deliberately smaller than a Button. It has no surface,
+ * no height of its own and no colour unless asked — what it has is a line under
+ * it, which is the one mark a reader already knows means "this goes somewhere".
+ *
+ * The three things it does that a bare `<a>` does not: it draws that line on a
+ * schedule (`always`, or only under the pointer), it marks a link that opens a
+ * new tab both visibly and for a screen reader, and it takes `render`, so the
+ * `Link` a router brings can wear all of it.
+ */
+export declare const TextLink: React.ForwardRefExoticComponent<TextLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/text-link/TextLink.js

@@ -0,0 +1 @@
+import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{useMessages as a}from"../../internal/i18n";import{ExternalLinkIcon as t,LinkIcon as l}from"../../internal/icons";import{controlTextLeadingClasses as s,focusRingClasses as c,srOnlyClasses as m}from"../../internal/styles";const d={always:"[&.neba-link]:underline",hover:"[&.neba-link]:no-underline [&.neba-link]:hover:underline",none:"[&.neba-link]:no-underline"},u=["neba-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0",["[transition-property:color,text-decoration-color]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const TextLink=i.forwardRef(function({href:i,underline:c="always",color:p,size:b,newTab:f=!1,icon:v,locale:h,render:k,className:g,style:x,children:y,...j},w){const _=a(h),N=v??f,T=!0===N?n(f?t:l,{}):N,z=[u,b?s[b]:"",d[c],p?"[&.neba-link]:text-(--n-accent)":"[&.neba-link]:text-inherit",g??""].filter(Boolean).join(" "),C={"--n-underline":"color-mix(in oklab, currentColor 45%, transparent)","--n-underline-hover":"currentColor","--n-ring":`var(--neba-${p??"primary"}-ring)`,...p?{"--n-accent":`var(--neba-${p}-accent)`}:null};return o({render:k??n("a",{}),ref:w,props:{href:i,target:f?"_blank":void 0,rel:f?"noopener noreferrer":void 0,className:z,style:{...C,...x},children:r(e,{children:[y,T?n("span",{className:"ms-[0.25em]",children:T}):null,f?r(e,{children:[" ",n("span",{className:m,children:_.link.newTab})]}):null]}),...j}})});

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

@@ -0,0 +1,2 @@
+export { TextLink } from './TextLink';
+export type { TextLinkProps, TextLinkUnderline } from './TextLink';

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

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

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