neba 1.0.0 → 1.2.0

package/README.md

@@ -1,10 +1,12 @@
+<img src=".github/128x128.png" alt="Neba UI" width="128" height="128" />
+
 # Neba UI
 
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/neba/blob/main/LICENSE) ![Programming Language Usage](https://img.shields.io/github/languages/top/jooy2/neba) ![Commit Count](https://img.shields.io/github/commit-activity/y/jooy2/neba) [![npm downloads](https://img.shields.io/npm/dm/neba.svg)](https://www.npmjs.com/package/neba) [![npm latest package](https://img.shields.io/npm/v/neba/latest.svg)](https://www.npmjs.com/package/neba) ![npm bundle size](https://img.shields.io/bundlephobia/min/neba) [![Followers](https://img.shields.io/github/followers/jooy2?style=social)](https://github.com/jooy2) ![Stars](https://img.shields.io/github/stars/jooy2/neba?style=social)
 
 ### 📘 [**neba.cdget.com**](https://neba.cdget.com)
 
-[![Components](https://img.shields.io/badge/All_components-live_previews-444?style=for-the-badge)](https://neba.cdget.com/components/)
+[![Components](https://img.shields.io/badge/All_components-live_previews-444?style=for-the-badge)](https://neba.cdget.com/examples/overview)
 
 Live previews and full props for every component. This README is just the quick start.
 
@@ -12,7 +14,7 @@ Live previews and full props for every component. This README is just the quick
 
 **Neba UI is a React component library for building application interfaces.** It gives you the pieces a real product needs — buttons and form fields, menus and dialogs, tables and tabs, progress and notifications — already styled, already accessible, and already agreeing with each other.
 
-You install one package, add two lines to your CSS, and import components. There is nothing to configure, no theme object to assemble, and no per-component styling decisions to make before you can ship a screen.
+You install one package, add one line to your CSS, and import components. There is nothing to configure, no theme object to assemble, and no per-component styling decisions to make before you can ship a screen.
 
 - **A broad component set, still growing** — enough to build a whole screen without reaching elsewhere.
 - **One shared vocabulary** — `size`, `color`, `variant`, `density`, `elevation`. An `md` is the same height on every control; `primary` is the same colour everywhere.
@@ -20,7 +22,7 @@ You install one package, add two lines to your CSS, and import components. There
 - **Dark mode with no work** — follows the system, and can be forced either way per subtree.
 - **A design language, not a theme file** — a translucent acrylic surface with a hairline edge, one deliberate motion signature, and shadows that are opt-in.
 - **ESM only**, TypeScript declarations included, tree-shakeable — every component compiles to its own module.
-- **One runtime dependency.** React 19, Node.js 18 or later.
+- **One runtime dependency.** React 18 or 19, Node.js 18 or later.
 
 ## Documentation
 
@@ -30,10 +32,11 @@ Everything is documented at **[neba.cdget.com](https://neba.cdget.com)**, where
 | --- | --- |
 | [**Getting started**](https://neba.cdget.com/guide/getting-started) | Install and setup, end to end. |
 | [**All components**](https://neba.cdget.com/components/) | Every component, one page each: live previews and the full props table. |
-| [**Examples**](https://neba.cdget.com/examples/) | A whole sample screen, explained block by block. |
-| [**Design language**](https://neba.cdget.com/guide/design-language) | Why a Neba surface looks and behaves the way it does. |
-| [**Prop conventions**](https://neba.cdget.com/guide/prop-conventions) | The shared vocabulary every component draws from. |
-| [**Color**](https://neba.cdget.com/guide/color) | The token families, and how to theme them. |
+| [**Examples**](https://neba.cdget.com/examples/overview) | A whole sample screen explained block by block, plus three concept screens — a landing page, an admin dashboard and a sign-up flow. |
+| [**Design language**](https://neba.cdget.com/design/design-language) | Why a Neba surface looks and behaves the way it does. |
+| [**Prop conventions**](https://neba.cdget.com/design/prop-conventions) | The shared vocabulary every component draws from. |
+| [**Color**](https://neba.cdget.com/design/color) | The token families, and how to theme them. |
+| [**Changelog**](https://neba.cdget.com/changelog) | What changed in each release, and the setup changes worth acting on. |
 
 Also available in Korean / 한국어 문서: **[neba.cdget.com/ko/](https://neba.cdget.com/ko/)**
 
@@ -47,21 +50,27 @@ npm install neba
 pnpm add neba
 ```
 
-Neba expects `react` and `react-dom` to be available in your project.
+`react` and `react-dom` are peer dependencies — React 18 or 19. Neba uses the copy your project already has, and npm 7 and later will install them alongside it if it has none.
 
 ### Setup
 
-Add two lines to your app's CSS entry point:
+Add one line to your app's CSS entry point:
 
 ```css
-@import 'tailwindcss';
 @import 'neba/styles.css';
 ```
 
-`neba/styles.css` carries the design tokens and registers the package as a style source itself — so there is no `@source` line for you to write, and no path that depends on where your CSS file happens to sit. Utility classes come from [Tailwind CSS](https://tailwindcss.com) v4, which is the only build-side requirement Neba has.
+`neba/styles.css` is finished CSS — the design tokens, the compiled rules for every utility class the components use, and a small reset whose every rule is specificity 0 so your own styles always win. [Tailwind CSS](https://tailwindcss.com) v4 builds this package; it does not have to be installed in yours.
 
 That is the whole setup. No provider is required at the root, no theme object, no config file.
 
+If your project already runs Tailwind v4, import `neba/tailwind.css` instead — the token sheet, which registers the package as a style source so your own build generates the utilities in the same pass as your app's:
+
+```css
+@import 'tailwindcss';
+@import 'neba/tailwind.css';
+```
+
 ## Usage
 
 Import components from the package root:
@@ -93,7 +102,7 @@ The reason a Neba screen looks composed rather than assembled is that the props
 | `density` | `default` `compact` | Padding only — never the height, never the type scale, so a compact control still lines up with a default one. |
 | `elevation` | `0` `1` `2` `3` | How far a surface floats off the page. `0` is the default and means no shadow at all. |
 
-Placement props are logical, not physical — `start`/`end` rather than `left`/`right` — so layouts flip correctly under RTL. The full rules are in [**Prop conventions**](https://neba.cdget.com/guide/prop-conventions).
+Placement props are logical, not physical — `start`/`end` rather than `left`/`right` — so layouts flip correctly under RTL. The full rules are in [**Prop conventions**](https://neba.cdget.com/design/prop-conventions).
 
 ```tsx
 <Button size="sm" color="danger" variant="outline">Delete</Button>
@@ -102,15 +111,17 @@ Placement props are logical, not physical — `start`/`end` rather than `left`/`
 
 ### Components
 
-**Inputs** — Button, ButtonGroup, TextField, NumberField, Select, Combobox, Checkbox, RadioGroup, Switch, Slider, Menu (with submenus, checkbox and radio items), ContextMenu, FilePicker, Pagination
+**Inputs** — Button, IconButton, ButtonGroup, SegmentedButton, TextField, NumberField, OtpField, Select, Combobox, Checkbox, RadioGroup, Switch, Slider, Menu (with submenus, checkbox and radio items), ContextMenu, FilePicker, Pagination, DatePicker, TimePicker, DateTimePicker, DateRangePicker
 
-**Surfaces** — Box, Card, Accordion, Tabs
+**Surfaces** — Box, Card, Accordion, Tabs, Carousel, Toolbar, Pill, Spoiler, ChatBubble
 
-**Display** — Typography, Divider, Chip, Badge, List, Table
+**Display** — Typography, TextLink, Blockquote, Highlight, Divider, Chip, Badge, Avatar, Icon, Shortcut, Statistic, List, Table, Timeline, Breadcrumb, TreeView
 
 **Feedback** — Alert, Dialog, Toast, Tooltip, Overlay, ProgressLinear, ProgressCircular, ProgressBox
 
-Recent additions: **Combobox** (a select you can type into and filter, single or multiple), **NumberField** (a numeric input with steppers, `min`/`max` clamping and a `step`), and **Overlay** (a sheet that takes the page — dim, frosted, opaque, or invisible but still blocking).
+**Layout** — Container, Grid (with GridContainer), Panes
+
+Recent additions: **ChatBubble** (one message in a conversation, where the avatar, the time, the delivery mark, the media and the link card are each drawn only when given something), **Spoiler** (content covered by a blur rather than hidden, so a reader can see there is something there without reading it by accident), **TextLink** (a link with no surface of its own, and a mark for the ones that take over the window), **Avatar** (falls back to initials, a glyph or a silhouette, so it is never an empty box), **TreeView**, **Breadcrumb**, **Panes** (regions with a draggable bar between each pair) and **OtpField**; before those, **Blockquote**, **Shortcut**, **Highlight**, **SegmentedButton** and **Timeline**, and the four pickers — **DatePicker**, **TimePicker**, **DateTimePicker** and **DateRangePicker** — which take and return a plain `Date` and add no date library to your bundle.
 
 Each one has its own page — live previews, every prop, and the variations worth seeing — under [**All components**](https://neba.cdget.com/components/).
 

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import type { NebaColor, NebaElevation, NebaSize, NebaVariant } from '../../types';
+/** What Base UI reports about the picture as it loads. */
+export type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+/**
+ * The crop, not the sheet.
+ *
+ * `circle` is the default, and it is the one place besides Badge where the
+ * library draws something without a flat run along its edge. The reasoning is
+ * Badge's: the cut acrylic edge is what says "this is a surface", and an avatar
+ * is not a surface — it is a portrait laid on one. A round crop is what a
+ * portrait has been for as long as there have been portraits.
+ *
+ * `square` cuts the corners off instead, which is what a logo or a repository
+ * icon wants: those are drawn to the edges of a rectangle and a round crop eats
+ * them.
+ */
+export type AvatarShape = 'circle' | 'square';
+export interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * The picture. Until it loads — and forever, if it fails — the fallback is
+     * what is drawn, so an avatar is never an empty box.
+     */
+    src?: string;
+    /** Candidate images at other resolutions, as on any `<img>`. */
+    srcSet?: string;
+    /**
+     * What the picture says, for a reader who cannot see it. Defaults to `name`,
+     * and to nothing at all when there is no name — an avatar next to the person's
+     * own name in the row is decoration, and reading it out says the name twice.
+     */
+    alt?: string;
+    /**
+     * Who or what this is. One prop doing three jobs: it names the picture, the
+     * initials are derived from it, and it is the sentence a screen reader hears
+     * instead of those initials.
+     *
+     * The initials are the first character of the first word plus the first
+     * character of the last — "Jane Doe" is `JD`, "홍길동" is `홍`. That rule is
+     * wrong for some names, which is what `initials` is for.
+     */
+    name?: string;
+    /** The initials, written out, for when the rule derived the wrong ones. */
+    initials?: string;
+    /**
+     * The crop.
+     * @default 'circle'
+     */
+    shape?: AvatarShape;
+    /**
+     * Weight of the surface behind the fallback. Invisible once a picture has
+     * loaded, apart from the edge it keeps.
+     * @default 'text'
+     */
+    variant?: NebaVariant;
+    /**
+     * The box the picture is drawn in — the control heights, so an avatar and the
+     * button beside it in a toolbar are the same height.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /**
+     * Drop shadow depth. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * How long to wait before drawing the fallback, in milliseconds. Set it to
+     * roughly the time a cached image takes and the initials stop flashing up in
+     * front of a picture that was about to arrive anyway.
+     */
+    delay?: number;
+    /** Anything else the `<img>` needs — `loading`, `crossOrigin`, `referrerPolicy`. */
+    imageProps?: Omit<React.ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'alt'>;
+    /** Called as the picture moves between `idle`, `loading`, `loaded` and `error`. */
+    onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
+    /**
+     * The fallback, drawn instead of the initials. An icon, a logo, a single
+     * emoji — whatever stands in for this particular thing when there is no
+     * picture of it.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A picture of a person or a thing, at a known size, that is never an empty box.
+ *
+ * Three things can be drawn in it and exactly one of them is at a time: the
+ * picture, if `src` is given and loads; otherwise whatever stands in for it —
+ * `children`, or `initials`, or the initials derived from `name`; and failing
+ * all of those, a silhouette. Which one is showing is Base UI's `Avatar` to
+ * decide, because "has the image loaded" is a question with four answers and a
+ * race in the middle of it.
+ *
+ * It carries no status dot of its own. An avatar with a green mark on it is a
+ * [Badge](./badge) with an avatar in it, and inventing a second spelling for
+ * that would give the library two of them.
+ */
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/avatar/Avatar.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Avatar as n}from"@base-ui/react/avatar";import{controlHeightClasses as a,controlSlots as o,controlSquareClasses as l,hasContent as s,srOnlyClasses as i,surfaceClasses as d,transitionClasses as c}from"../../internal/styles";const m={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},f={xs:"rounded-[0.375rem]",sm:"rounded-[0.4375rem]",md:"rounded-[0.5625rem]",lg:"rounded-[0.6875rem]",xl:"rounded-[0.875rem]"},u={solid:[d,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev)]"].join(" "),outline:[d,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft-press) [box-shadow:var(--n-elev)]"},x="after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit]",h={solid:`${x} after:[box-shadow:var(--neba-plate-solid)]`,outline:`${x} after:[box-shadow:var(--neba-plate-glass)]`,text:""},v=["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle font-semibold tracking-wide whitespace-nowrap leading-none","[&_svg]:pointer-events-none [&_svg]:size-[55%]",c].join(" ");function p(){return r("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const Avatar=t.forwardRef(function({src:t,srcSet:d,alt:c,name:x,initials:g,shape:b="circle",variant:w="text",size:j="md",color:y="primary",elevation:N=0,delay:z,imageProps:C,onLoadingStatusChange:A,className:B,style:S,children:k,...L},F){const M=x?function(e){const r=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===r.length?"":((Array.from(r[0])[0]??"")+(r.length>1?Array.from(r[r.length-1])[0]??"":"")).toLocaleUpperCase()}(x):"",R=c??x,Z=s(k)?k:(g??M)||e(p,{}),$=s(k)||Boolean(g??M),_=[v,a[j],l[j],m[j],"circle"===b?"rounded-full":f[j],u[w],h[w],B??""].filter(Boolean).join(" ");return r(n.Root,{ref:F,className:_,style:{...o(y,N,w),...S},...L,children:[t?e(n.Image,{src:t,srcSet:d,alt:R??"",className:"size-full object-cover",onLoadingStatusChange:A,...C}):null,r(n.Fallback,{delay:t?z:void 0,className:"flex size-full items-center justify-center",children:[R&&$?e("span",{className:i,children:R}):null,e("span",{"aria-hidden":!(!R||!$)||void 0,className:"contents",children:Z})]})]})});

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

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarLoadingStatus, AvatarProps, AvatarShape } from './Avatar';

package/dist/components/avatar/index.js

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

package/dist/components/blockquote/Blockquote.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+/**
+ * The props are a `<figure>`'s rather than a `<blockquote>`'s, which is a
+ * consequence of where the drawing happens: everything a caller passes lands on
+ * the wrapper, and the wrapper is a figure or a div. Both are `HTMLElement`, so
+ * an event handler written against one works on the other.
+ */
+export interface BlockquoteProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'figure'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` (the default) is flat — a quote is set *into* a page
+     * rather than floating over it, so this is raised even less often than on a
+     * Card.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * Who said it. Its presence is what turns the quote into a `<figure>` with a
+     * `<figcaption>`, which is the markup the HTML spec asks for: an attribution
+     * is *about* the quote and is not part of what was said.
+     */
+    author?: React.ReactNode;
+    /**
+     * Where it is from — a book, a talk, a page. Rendered inside a `<cite>`, which
+     * is the element for the title of a work and, per the spec, never for the name
+     * of a person. That is what `author` is.
+     */
+    source?: React.ReactNode;
+    /**
+     * URL of the document the quote was taken from. Lands on the `<blockquote>`'s
+     * own `cite` attribute, which is machine-readable and shown to nobody — use
+     * `source` for the part a reader should see.
+     */
+    cite?: string;
+    /**
+     * The mark drawn before the quote. Omit it for the house glyph, pass a node to
+     * replace it, pass `false` to take it away — the same three-way spelling Alert
+     * uses for the same idea.
+     */
+    icon?: React.ReactNode | false;
+    /** What was said. */
+    children?: React.ReactNode;
+}
+/**
+ * Somebody else's words, set apart from your own.
+ *
+ * There is no Base UI primitive under this and there should not be: a quote has
+ * no state, no keyboard contract and nothing to interact with. What it has is
+ * markup that is easy to get wrong, and getting it right is most of the point.
+ *
+ * **Nothing is drawn on the `<blockquote>` itself.** The surface, the rule and
+ * the padding all belong to the element around it, and that is not tidiness —
+ * `blockquote` is one of the handful of tags a host stylesheet still styles by
+ * name. VitePress's `.vp-doc blockquote` sets a grey `border-left`, a
+ * `padding-left` and a `color`, all at a specificity a one-class utility cannot
+ * outrank, so a rule drawn on the quote itself would silently come out grey and
+ * a pixel too thin. Moving the drawing onto a wrapper is what lets the docs undo
+ * VitePress's version in `scope.css` without also undoing ours.
+ *
+ * The wrapper is a `<figure>` when there is an attribution and a `<div>` when
+ * there is not, because the HTML spec is explicit that the attribution goes
+ * *outside* the blockquote — a name inside it claims the speaker said their own
+ * name — and a `<figure>` with no `<figcaption>` in it is a figure of nothing.
+ */
+export declare const Blockquote: React.ForwardRefExoticComponent<BlockquoteProps & React.RefAttributes<HTMLElement>>;

package/dist/components/blockquote/Blockquote.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{boxPaddingClasses as n}from"../box/Box";import{hasContent as l,metaTextClasses as a,radiusClasses as o,surfaceClasses as i,surfaceSlots as s,transitionClasses as c}from"../../internal/styles";const m={xs:"text-[0.75rem]/[1.25rem]",sm:"text-[0.8125rem]/[1.375rem]",md:"text-[0.9375rem]/[1.625rem]",lg:"text-[1.0625rem]/[1.875rem]",xl:"text-[1.25rem]/[2.125rem]"},d="border-s-2 [border-inline-start-color:var(--n-accent)]",x={solid:[i,"bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[i,"border border-s-2 bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"bg-transparent"};function f(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const Blockquote=t.forwardRef(function({variant:t="text",size:i="md",color:u="primary",density:b="default",elevation:p=0,author:h,source:v,cite:g,icon:N,className:j,style:y,children:w,...B},k){const z=l(h)||l(v),q=void 0===N?e(f,{}):N,M=["flex flex-col text-(--neba-fg)",d,"text"===t?"":`${o[i]} rounded-s-none`,x[t],n[b][i],c,j??""].filter(Boolean).join(" "),Z=r("blockquote",{cite:g,className:m[i],children:[l(q)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] text-(--n-soft-press) [&>svg]:size-full",children:q}):null,w]}),C={...s(u,p),...y};return z?r("figure",{ref:k,className:M,style:C,...B,children:[Z,r("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5 text-(--neba-muted-fg)",a[i]].join(" "),children:[l(h)?r("span",{className:"font-medium text-(--neba-fg)",children:[e("span",{"aria-hidden":"true",children:"— "}),h]}):null,l(v)?e("cite",{className:"not-italic",children:v}):null]})]}):e("div",{ref:k,className:M,style:C,...B,children:Z})});

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

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

package/dist/components/blockquote/index.js

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

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type { NebaColor, NebaDensity, NebaSize } from '../../types';
+/**
+ * What is drawn between two steps of the trail.
+ *
+ * Four named marks rather than a free-for-all, because a separator is read
+ * hundreds of times a day and the difference between them is meaning, not
+ * decoration: a `chevron` and an `arrow` say "and then", a `slash` says "path",
+ * a `dot` says "these are peers of one thing". Anything else can still be passed
+ * as a node.
+ */
+export type BreadcrumbSeparator = 'chevron' | 'arrow' | 'slash' | 'dot';
+export interface BreadcrumbProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'color'> {
+    /** @default 'md' */
+    size?: NebaSize;
+    /** The colour family a link picks up when it is hovered. @default 'primary' */
+    color?: NebaColor;
+    /** How tightly the steps pack. Spacing only. @default 'default' */
+    density?: NebaDensity;
+    /**
+     * The mark between two steps. One of the four names, or any node.
+     * @default 'chevron'
+     */
+    separator?: BreadcrumbSeparator | React.ReactNode;
+    /**
+     * How many steps to show before the middle is folded away behind a `…`.
+     * Left out, the whole trail is shown however long it gets.
+     */
+    maxItems?: number;
+    /** How many steps stay at the front of a folded trail. @default 1 */
+    itemsBeforeCollapse?: number;
+    /** How many stay at the end. @default 1 */
+    itemsAfterCollapse?: number;
+    /**
+     * Whether pressing the `…` unfolds the trail in place. Turn it off to leave
+     * the fold as a plain mark.
+     * @default true
+     */
+    expandable?: boolean;
+    /** The name the trail is announced by. @default 'Breadcrumb' */
+    label?: string;
+    /** What the `…` is announced as. @default 'Show hidden steps' */
+    expandLabel?: string;
+    /** The BreadcrumbItems. */
+    children?: React.ReactNode;
+}
+export interface BreadcrumbItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
+    /** Renders the step as a link. */
+    href?: string;
+    /** Fires when the step is pressed. Renders it as a button when there is no `href`. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Content before the label — a home glyph, a repository avatar. */
+    startIcon?: React.ReactNode;
+    /** Content after the label. */
+    endIcon?: React.ReactNode;
+    /**
+     * Marks this step as the page you are on, which stops it being a link.
+     *
+     * The last step is the current one on its own, so this is only needed for a
+     * trail that ends somewhere the reader is not — and setting it anywhere takes
+     * the mark off the last step, because only one step in a trail can be it.
+     */
+    current?: boolean;
+    /** Unavailable. Stops answering, keeps its place in the trail. */
+    disabled?: boolean;
+    /** The step's label. */
+    children?: React.ReactNode;
+}
+/**
+ * The trail of pages above the one being read.
+ *
+ * Two things make this more than a row of links. The first is that the last step
+ * is where the reader already is, so it is not a link at all — it carries
+ * `aria-current="page"` and stops being pressable, and the component works that
+ * out rather than asking every caller to remember it. The second is the fold: a
+ * trail seven levels deep is a trail nobody reads, so the middle collapses to a
+ * `…` that puts it back when pressed.
+ *
+ * The separators are drawn by the trail rather than by the steps. A step does
+ * not know whether anything follows it, and a mark that belonged to a step would
+ * have to be taken off the last one by hand.
+ */
+export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One step of the trail.
+ *
+ * It renders three different things and the caller picks by what they pass: an
+ * `<a>` with an `href`, a `<button>` with an `onClick`, and a plain `<span>` with
+ * neither — which is what the last step is, because the page you are already on
+ * is not somewhere to go.
+ */
+export declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a,Fragment as n}from"react/jsx-runtime";import*as t from"react";import{ArrowRightIcon as s,ChevronIcon as r,EllipsisIcon as l}from"../../internal/icons";import{controlTextClasses as i,cx as c,gapClasses as o,hasContent as m,iconClasses as d,radiusClasses as f,transitionClasses as u}from"../../internal/styles";const h=t.createContext({size:"md",last:!1}),p={default:{xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},compact:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"}},x={xs:f.xs,sm:f.xs,md:f.xs,lg:f.sm,xl:f.sm};const b=["chevron","arrow","slash","dot"];export const Breadcrumb=t.forwardRef(function({size:n="md",color:o="primary",density:m="default",separator:f="chevron",maxItems:x,itemsBeforeCollapse:g=1,itemsAfterCollapse:v=1,expandable:N=!0,label:y="Breadcrumb",expandLabel:w="Show hidden steps",className:k,style:C,children:B,...z},I){const[_,j]=t.useState(!1),M=t.Children.toArray(B).filter(t.isValidElement),$=M.length,A=M.some(e=>!0===e.props.current),F=!_&&void 0!==x&&$>Math.max(x,1)&&$-g-v>1?[...M.slice(0,Math.max(0,g)),null,...M.slice($-Math.max(0,v))]:M,R="string"==typeof(S=f)&&b.includes(S)?function(a){switch(a){case"chevron":return e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(r,{})});case"arrow":return e("span",{className:"flex items-center rtl:rotate-180",children:e(s,{})});case"slash":return e("span",{className:"opacity-70",children:"/"});case"dot":return e("span",{className:"opacity-70",children:"·"});default:return null}}(f):f;var S;const E=c("inline-flex items-center rounded-(--neba-radius-xs) px-0.5","text-(--neba-muted-fg)",u,d,N?c("cursor-pointer hover:bg-(--n-soft) hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"):"");return e("nav",{ref:I,"aria-label":y,className:c("flex",i[n],d,k),style:{"--n-accent":`var(--neba-${o}-accent)`,"--n-soft":`var(--neba-${o}-soft)`,"--n-ring":`var(--neba-${o}-ring)`,...C},...z,children:e("ol",{role:"list",className:c("flex list-none flex-wrap items-center p-0",p[m][n]),children:F.map((s,r)=>a(t.Fragment,{children:[r>0?e("li",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--neba-muted-fg) select-none",children:R}):null,s?e(h.Provider,{value:{size:n,last:!A&&r===F.length-1},children:s}):e("li",{className:"flex shrink-0 items-center",children:N?e("button",{type:"button",className:E,"aria-label":w,onClick:()=>j(!0),children:e(l,{})}):e("span",{className:E,"aria-hidden":"true",children:e(l,{})})})]},s?s.key??r:"fold"))})})});export const BreadcrumbItem=t.forwardRef(function({href:s,onClick:r,startIcon:l,endIcon:i,current:d,disabled:f=!1,className:p,children:b,...g},v){const{size:N,last:y}=t.useContext(h),w=d??y,k=Boolean(s||r)&&!w&&!f,C=c("inline-flex min-w-0 items-center px-1",o[N],x[N],u,f?"cursor-not-allowed text-(--neba-disabled-fg)":w?"font-medium text-(--neba-fg)":k?c("cursor-pointer text-(--neba-muted-fg)","hover:bg-(--n-soft) hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"):"text-(--neba-muted-fg)"),B=a(n,{children:[m(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,e("span",{className:"truncate",children:b}),m(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null]});return e("li",{ref:v,className:c("flex min-w-0 items-center",p),...g,children:k&&s?e("a",{href:s,className:C,onClick:r,children:B}):k?e("button",{type:"button",className:C,onClick:r,children:B}):e("span",{className:C,"aria-current":w?"page":void 0,"aria-disabled":f||void 0,children:B})})});

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

@@ -0,0 +1,2 @@
+export { Breadcrumb, BreadcrumbItem } from './Breadcrumb';
+export type { BreadcrumbItemProps, BreadcrumbProps, BreadcrumbSeparator } from './Breadcrumb';

package/dist/components/breadcrumb/index.js

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

package/dist/components/carousel/Carousel.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+export interface CarouselProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Drop shadow depth of the frame. `0` — the default — is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /** Which slide is showing, counted from 0. Use with `onValueChange`. */
+    value?: number;
+    /** Which starts showing, for an uncontrolled carousel. @default 0 */
+    defaultValue?: number;
+    onValueChange?: (index: number) => void;
+    /**
+     * Whether the arrows wrap from the last slide back to the first. With it off
+     * they go inert at the ends instead, which is the honest thing for a set that
+     * has a beginning and an end — a gallery of three photographs does, a rotating
+     * banner does not.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Advances on its own.
+     *
+     * Off by default and deliberately so: a carousel that moves while it is being
+     * read is the most complained-about pattern on the web. It pauses on hover,
+     * on focus anywhere inside it, while the tab is in the background, and it does
+     * not start at all for a reader who has asked for reduced motion.
+     * @default false
+     */
+    autoPlay?: boolean;
+    /** How long each slide is held, in milliseconds. @default 5000 */
+    interval?: number;
+    /** The previous/next buttons. @default true */
+    arrows?: boolean;
+    /** The row of position dots under the frame. @default true */
+    indicators?: boolean;
+    /** The carousel's accessible name. @default 'Carousel' */
+    label?: string;
+    /** @default 'Previous slide' */
+    previousLabel?: string;
+    /** @default 'Next slide' */
+    nextLabel?: string;
+    /**
+     * How one slide is named to a screen reader, and how its dot is labelled.
+     * @default (index, count) => `Slide ${index} of ${count}`
+     */
+    slideLabel?: (index: number, count: number) => string;
+    /** The slides. Every top-level child becomes one. */
+    children?: React.ReactNode;
+}
+/**
+ * A strip of slides, one of which is in view.
+ *
+ * The mechanism is a scroll container with CSS scroll snapping, and everything
+ * good about this component follows from that one choice. Swiping on a phone and
+ * two-finger dragging on a trackpad both work because they are the browser's own
+ * scrolling and not a gesture handler pretending to be it. The strip runs the
+ * other way under RTL without being told, because scrolling is directional and
+ * `translate` is not. And nothing is transformed — the house rule against moving
+ * a surface holds here for free, where a translated track would have had to
+ * argue for an exception.
+ *
+ * The motion is `scroll-behavior: smooth`, which means a reader who has asked
+ * for reduced motion gets an instant cut from the same code path rather than
+ * from a second one written to remember them.
+ *
+ * Slides are not a sub-component. Every top-level child is wrapped in its own
+ * slide, so `<Carousel><img /><img /></Carousel>` is the whole API — and the
+ * wrapper is what carries the snap point, the width and the
+ * `role="group"`/`aria-roledescription="slide"` pair a screen reader needs, none
+ * of which a caller should have to remember to put on a photograph.
+ */
+export declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/carousel/Carousel.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{IconButton as n}from"../icon-button/IconButton";import{ChevronIcon as a}from"../../internal/icons";import{radiusClasses as o,srOnlyClasses as i,surfaceClasses as l,surfaceSlots as s,transitionClasses as c}from"../../internal/styles";const u={solid:[l,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[l,"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"},d={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},f={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}},m=(e,r)=>`Slide ${e} of ${r}`;export const Carousel=t.forwardRef(function({variant:l="outline",size:p="md",color:v="primary",density:h="default",elevation:b=0,value:w,defaultValue:g=0,onValueChange:x,loop:N=!0,autoPlay:y=!1,interval:j=5e3,arrows:k=!0,indicators:C=!0,label:M="Carousel",previousLabel:R="Previous slide",nextLabel:$="Next slide",slideLabel:I=m,className:L,style:P,children:S,..._},z){const B=t.Children.toArray(S),E=B.length,[V,T]=t.useState(g),W=Math.min(Math.max(w??V,0),Math.max(E-1,0)),A=t.useRef(null),F=t.useRef([]),q=t.useRef(!1),D=t.useRef(!1),G=t.useRef(!1),[H,J]=t.useState(!1),K=t.useCallback((e,r=!1)=>{if(0===E)return;const t=N?(e%E+E)%E:Math.min(Math.max(e,0),E-1);q.current=r,void 0===w&&T(t),t!==W&&x?.(t)},[E,N,w,W,x]);t.useEffect(()=>{if(q.current)return void(q.current=!1);if(!D.current)return void(D.current=!0);F.current[W]?.scrollIntoView({block:"nearest",inline:"start"}),G.current=!0;const e=window.setTimeout(()=>{G.current=!1},700);return()=>window.clearTimeout(e)},[W]);t.useEffect(()=>{if(!y||H||E<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||K(W+1)},j);return()=>window.clearInterval(e)},[y,H,E,j,W,K]);const O=W<=0,Q=W>=E-1;return r("div",{ref:z,role:"region","aria-roledescription":"carousel","aria-label":M,className:["flex flex-col",L??""].filter(Boolean).join(" "),style:{...s(v,b),...P},onPointerEnter:()=>J(!0),onPointerLeave:()=>J(!1),onFocus:()=>J(!0),onBlur:()=>J(!1),..._,children:[r("div",{className:["relative min-w-0 overflow-hidden",o[p],u[l],c].join(" "),children:[e("div",{ref:A,tabIndex:0,role:"group","aria-label":M,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),onScroll:()=>{const e=A.current;if(!e||0===e.clientWidth||G.current)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==W&&r>=0&&r<E&&K(r,!0)},children:B.map((r,t)=>e("div",{ref:e=>{F.current[t]=e},role:"group","aria-roledescription":"slide","aria-label":I(t+1,E),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),k&&E>1?r("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${d[p]}`,children:[e(n,{variant:"solid",size:p,color:v,density:h,elevation:1,label:R,disabled:!N&&O,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(a,{})}),onClick:()=>K(W-1)}),e("span",{className:"flex-1"}),e(n,{variant:"solid",size:p,color:v,density:h,elevation:1,label:$,disabled:!N&&Q,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(a,{})}),onClick:()=>K(W+1)})]}):null]}),C&&E>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${f[p].gap}`,children:B.map((r,t)=>e("button",{type:"button","aria-label":I(t+1,E),"aria-current":t===W?"true":void 0,className:["cursor-pointer rounded-full","[transition-property:width,background-color]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",t===W?`${f[p].current} bg-(--n-accent)`:`${f[p].rest} bg-(--n-line-hover) hover:bg-(--n-accent)`].join(" "),onClick:()=>K(t)},t))}):null,e("span",{className:i,"aria-live":y?"off":"polite",children:E>0?I(W+1,E):""})]})});

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

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

package/dist/components/carousel/index.js

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

package/dist/components/chat-bubble/ChatBubble.d.ts

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import type { NebaColor, NebaDensity, NebaElevation, NebaSize, NebaVariant } from '../../types';
+/**
+ * Whose message this is.
+ *
+ * `start` and `end` rather than `them`/`me` or `left`/`right`: a thread runs the
+ * way the language does, and the same two words already mean this everywhere
+ * else in the library. `start` is the default because a message from someone
+ * else is the one you have no other way of knowing about.
+ */
+export type ChatBubbleSide = 'start' | 'end';
+/**
+ * How far a message has got.
+ *
+ * The four steps are a ladder and the fifth is not on it: `failed` is the
+ * message that did not go, which is why it is the only one drawn in another
+ * colour family.
+ */
+export type ChatBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+/** What a link inside a message unfurls to. */
+export interface ChatBubbleLinkPreview {
+    /** Where the card goes. */
+    url: string;
+    /** The page's title. */
+    title?: React.ReactNode;
+    /** Its summary, clamped to two lines. */
+    description?: React.ReactNode;
+    /** The share image, drawn across the top of the card. */
+    image?: string;
+    /** Who published it — a domain, a site name. */
+    site?: React.ReactNode;
+    /** Opens the card in a new tab. @default false */
+    newTab?: boolean;
+}
+export interface ChatBubbleProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * Whose message this is.
+     * @default 'start'
+     */
+    side?: ChatBubbleSide;
+    /** Who sent it, above the bubble. */
+    name?: React.ReactNode;
+    /** When it was sent, beside the name. */
+    time?: React.ReactNode;
+    /**
+     * The sender's picture — an [Avatar](../display/avatar), at the size the
+     * thread uses. Left out, the bubble takes the whole row.
+     */
+    avatar?: React.ReactNode;
+    /**
+     * How far the message has got, drawn as a mark under the bubble. Left out,
+     * nothing is drawn — a received message has no delivery state worth showing.
+     */
+    status?: ChatBubbleStatus;
+    /** Overrides the word the mark is read out as. */
+    statusLabel?: string;
+    /**
+     * Draws the three dots instead of the message. What `children` holds is left
+     * alone, so the same bubble can go back to it when the message arrives.
+     * @default false
+     */
+    typing?: boolean;
+    /**
+     * A picture, a video, a map — drawn edge to edge above the text, so the
+     * bubble's corners crop it.
+     */
+    media?: React.ReactNode;
+    /** A link in the message, unfurled into a card under the text. */
+    preview?: ChatBubbleLinkPreview;
+    /**
+     * The message's own actions — a [Menu](../inputs/menu) trigger, most of the
+     * time. Sits beside the bubble and stays out of the way until the row is
+     * hovered or something in it takes focus.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Which language the marks are read out in — a BCP 47 tag such as `ko`,
+     * `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     */
+    locale?: string;
+    /**
+     * Weight of the bubble's surface. `solid` is the usual way to tell your own
+     * messages from everyone else's; `side` deliberately does not decide this,
+     * because which end is filled is a decision about the product, not about the
+     * component.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /** @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** Padding inside the bubble, and nothing else. @default 'default' */
+    density?: NebaDensity;
+    /** Drop shadow depth. `0` (the default) is flat. @default 0 */
+    elevation?: NebaElevation;
+    /** The message. */
+    children?: React.ReactNode;
+}
+/**
+ * One message in a conversation.
+ *
+ * Everything around the bubble is optional and nothing about it is fixed by
+ * `side`: the avatar, the sender's name, the time, the delivery mark, the media
+ * above the text and the link card below it are each drawn only when they are
+ * given something. What `side` decides is which way the row runs and which
+ * corner of the sheet is cut short.
+ *
+ * `variant` is what tells your own messages from everyone else's, and it is
+ * deliberately not tied to `side` — filling the right-hand column is a
+ * convention, not a law, and a thread that fills neither is a perfectly good
+ * thread.
+ */
+export declare const ChatBubble: React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>>;