neba 0.0.1 → 1.1.0

package/README.md

@@ -1,9 +1,184 @@
-# Neba UI
+<img src=".github/128x128.png" alt="Neba UI" width="128" height="128" />
 
-This library is currently under testing. We do not recommend using it in production.
+# 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/examples/)
+
+Live previews and full props for every component. This README is just the quick start.
+
+---
+
+**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 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.
+- **Accessible by construction** — real roles, labels, focus management and keyboard support, not `div`s with click handlers.
+- **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 18 or 19, Node.js 18 or later.
+
+## Documentation
+
+Everything is documented at **[neba.cdget.com](https://neba.cdget.com)**, where the previews are not screenshots — they are the components, running in the page.
+
+| Page | What you will find |
+| --- | --- |
+| [**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/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. |
+
+Also available in Korean / 한국어 문서: **[neba.cdget.com/ko/](https://neba.cdget.com/ko/)**
+
+## Installation
+
+```bash
+npm install neba
+```
+
+```bash
+pnpm add neba
+```
+
+`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 one line to your app's CSS entry point:
+
+```css
+@import 'neba/styles.css';
+```
+
+`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:
+
+```tsx
+import { Button, Card, TextField } from 'neba';
+
+export default function SignIn() {
+  return (
+    <Card>
+      <TextField label="Email" type="email" />
+      <Button onClick={submit}>Sign in</Button>
+    </Card>
+  );
+}
+```
+
+A few components provide context and are mounted once, near the root, only if you use them — `ToastProvider` (paired with the `useToast()` hook) and `TooltipProvider`.
+
+### The shared prop vocabulary
+
+The reason a Neba screen looks composed rather than assembled is that the props mean one thing across the library. They live in [`src/types.ts`](src/types.ts) and every component draws from the same list:
+
+| Prop | Values | What it changes |
+| --- | --- | --- |
+| `size` | `xs` `sm` `md` `lg` `xl` | The control's scale. `md` is the desktop default. |
+| `color` | `primary` `secondary` `success` `warning` `danger` `info` | The semantic colour family. |
+| `variant` | `solid` `outline` `text` | How much visual weight the surface carries. |
+| `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/design/prop-conventions).
+
+```tsx
+<Button size="sm" color="danger" variant="outline">Delete</Button>
+<Chip size="sm" color="danger" variant="outline">Overdue</Chip>
+```
+
+### Components
+
+**Inputs** — Button, IconButton, ButtonGroup, SegmentedButton, TextField, NumberField, 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, Carousel, Toolbar, Pill
+
+**Display** — Typography, Blockquote, Highlight, Divider, Chip, Badge, Icon, Shortcut, Statistic, List, Table, Timeline
+
+**Feedback** — Alert, Dialog, Toast, Tooltip, Overlay, ProgressLinear, ProgressCircular, ProgressBox
+
+Recent additions: **Blockquote** (somebody else's words, with the `figure`/`figcaption` markup the spec actually asks for), **Shortcut** (a keyboard key or combination, where `Mod` resolves to Command on a Mac and Control everywhere else, and every glyph carries its name for a screen reader), **Highlight** (marks the words a reader searched for, walking into elements rather than demanding a plain string), **SegmentedButton** (exactly one of a set, in one pill, with a tile that slides between the choices and transforms nothing), and **Timeline** (a sequence of steps in the order they happen, vertical or as a horizontal stepper); before those, 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/).
+
+### Theming and dark mode
+
+Colours, radii, and surface strengths are CSS custom properties declared in the stylesheet you imported. Override any of them in your own CSS and the whole library follows:
+
+```css
+:root {
+  --neba-primary-fill: oklch(0.62 0.19 265);
+}
+```
+
+Dark mode responds to `prefers-color-scheme` on its own. To force it, put `.dark` or `[data-theme='dark']` (or `'light'`) on any ancestor — it applies to that subtree, so a dark panel on a light page is one attribute.
+
+Adding a whole new colour family is two edits: an entry in `NebaColor` and five tokens; everything else derives from them.
+
+## Development
+
+Clone the repository and install dependencies, then:
+
+| Command | What it does |
+| --- | --- |
+| `npm run docs:dev` | Starts the documentation site (`docs/`) locally — every component, rendered live, with HMR. |
+| `npm test` | Runs the test suite once. |
+| `npm run test:watch` | Runs the test suite in watch mode. |
+| `npm run typecheck` | Type-checks the library, the tests, and the docs. |
+| `npm run build` | Formats, compiles, and minifies the library into `dist/`. |
+| `npm run lint:fix` | Runs ESLint with autofix. |
+| `npm run format:fix` | Runs Prettier over the repository. |
+
+All commands are run from the repository root.
+
+### Project structure
+
+- `src/` — the library source. Each component lives in `src/components/{name}/` and is re-exported from `src/index.ts`.
+- `src/internal/` — what the library shares with itself: the size and spacing tables, the surface and focus-ring generators, the icons more than one component draws. Shipped, but not part of the public API.
+- `test/` — the test suite, mirroring the `src/` tree.
+- `docs/` — the VitePress documentation site, in English and Korean. It renders the real components from `src/`, so it is also where components are developed and eyeballed.
+
+There is no separate demo app: `npm run docs:dev` is the develop-and-eyeball loop.
+
+### Tests
+
+Tests run with [Vitest](https://vitest.dev) in browser mode, against a real headless browser driven by Playwright — the components depend on browser APIs (`ResizeObserver`, the popover API, `dialog.showModal()`) that jsdom does not implement. Install the browser once before your first run:
+
+```bash
+npx playwright install chromium
+```
+
+`npm test` uses Chromium. To run against another engine, set `VITEST_BROWSER` to `chromium`, `firefox`, or `webkit` (or a comma-separated list), having installed those browsers first:
+
+```bash
+VITEST_BROWSER=firefox npm test
+```
+
+CI runs the suite across Linux, Windows, and macOS in all three browser engines.
+
+Tests ship with the component they cover, in the same commit. Add a test at the path mirroring its source — `src/components/button/Button.tsx` is covered by `test/components/button/Button.test.tsx`.
+
 ## Contributing
 
 Anyone can contribute to the project by reporting new issues or submitting a pull request. For more information, please see [CONTRIBUTING.md](CONTRIBUTING.md).

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+export interface AccordionProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Drop shadow depth. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * Whether more than one section may be open at once.
+     *
+     * `false` by default, which is the whole reason an accordion is not just a
+     * stack of collapsibles: closing the last one as you open the next is what
+     * keeps the page from growing under the reader.
+     * @default false
+     */
+    multiple?: boolean;
+    /** Which sections are open. Use with `onValueChange` for a controlled accordion. */
+    value?: (string | number)[];
+    /** Which start open, for an uncontrolled one. */
+    defaultValue?: (string | number)[];
+    onValueChange?: (value: (string | number)[]) => void;
+    /**
+     * Separates the sections with a hairline rather than with space.
+     *
+     * On by default, which is the other way round from List. A list of tiles is a
+     * list; an accordion of tiles is a stack of cards that happen to fold, and the
+     * rule is what says the sections are parts of one thing.
+     * @default true
+     */
+    dividers?: boolean;
+    /** Unavailable. Every section stops answering. */
+    disabled?: boolean;
+    /**
+     * Keeps closed panels in the DOM so the browser's own page search can find and
+     * open them. Overrides `keepMounted`.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * Keeps closed panels in the DOM. For content that is expensive to build, or
+     * that holds form state which should survive being folded away.
+     * @default false
+     */
+    keepMounted?: boolean;
+    children?: React.ReactNode;
+}
+export interface AccordionItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'onChange'> {
+    /**
+     * Identifies the section to `value` / `defaultValue`. Base UI generates one
+     * when it is left out, which is fine for an accordion nobody drives from code.
+     */
+    value?: string | number;
+    /** The heading on the fold. */
+    title?: React.ReactNode;
+    /** A second line under the title, one step down the type scale and muted. */
+    subtitle?: React.ReactNode;
+    /** Content before the title — an icon, a status dot, a count. */
+    startIcon?: React.ReactNode;
+    /**
+     * A control pinned to the end of the header, before the chevron.
+     *
+     * Deliberately outside the trigger: a header that both folds and holds a
+     * switch has two things to press, and one of them cannot be nested inside the
+     * other. The same shape ListItem uses.
+     */
+    action?: React.ReactNode;
+    /** Unavailable. This section stops folding; the rest keep working. */
+    disabled?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+}
+/**
+ * A stack of sections, one of which is open.
+ *
+ * Base UI owns the parts that are genuinely hard: the `button` / `region`
+ * pairing and the `aria-controls` / `aria-expanded` wiring between them, the
+ * open set, and measuring the panel so it has a height to animate from.
+ *
+ * What is here is the surface, the ladders and the one motion decision. The
+ * panel's height *is* animated, which looks like an exception to the rule
+ * against moving things and is not: nothing is transformed, no text is resampled,
+ * and the content does not shift relative to the panel it is in — the panel is
+ * a window opening onto it. An accordion whose sections appear instantly is a
+ * page that jumps, which is the failure the rule exists to prevent.
+ */
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One section.
+ *
+ * The header is always a row; what is inside it is a real `<button>` covering
+ * the title and the chevron, with `action` sitting outside that button as a
+ * separate control. The same shape Chip and ListItem use, for the same two
+ * reasons: a `<div>` carrying a click handler is invisible to a keyboard, and a
+ * `<button>` inside a `<button>` is markup the browser rewrites on parse.
+ */
+export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/accordion/Accordion.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Accordion as t}from"@base-ui/react/accordion";import{boxPaddingXClasses as l,boxPaddingYClasses as r}from"../box/Box";import{ChevronIcon as i}from"../../internal/icons";import{focusRingClasses as s,gapClasses as o,hasContent as d,iconClasses as c,metaTextClasses as m,radiusClasses as f,sheetBodyClasses as u,sheetHeaderGapClasses as h,sheetTitleClasses as b,surfaceClasses as x,surfaceSlots as p,transitionClasses as v}from"../../internal/styles";const g=a.createContext({size:"md",density:"default",dividers:!0}),N={solid:[x,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[x,"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"},j={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const Accordion=a.forwardRef(function({variant:n="outline",size:l="md",color:r="primary",density:i="default",elevation:s=0,multiple:o=!1,value:d,defaultValue:c,onValueChange:m,dividers:u=!0,disabled:h=!1,hiddenUntilFound:b=!1,keepMounted:x=!1,className:j,style:w,children:y,...k},z){const B=a.useMemo(()=>({size:l,density:i,dividers:u}),[l,i,u]),C=["flex flex-col",f[l],N[n],v,u?"overflow-hidden [&>div+div]:border-t [&>div+div]:[border-color:var(--n-line)]":"p-1",j??""].filter(Boolean).join(" ");return e(g.Provider,{value:B,children:e(t.Root,{ref:z,multiple:o,value:d,defaultValue:c,onValueChange:e=>m?.(e),disabled:h,hiddenUntilFound:b,keepMounted:x,className:C,style:{...p(r,s),...w},...k,children:y})})});export const AccordionItem=a.forwardRef(function({value:f,title:x,subtitle:p,startIcon:N,action:w,disabled:y=!1,className:k,children:z,...B},C){const{size:V,density:$,dividers:_}=a.useContext(g),A=l[$][V],I=r[$][V];return n(t.Item,{ref:C,value:f,disabled:y,className:["flex flex-col",k??""].filter(Boolean).join(" "),...B,children:[n(t.Header,{className:"m-0 flex w-full items-center [font:inherit]",children:[n(t.Trigger,{className:["flex min-w-0 flex-1 cursor-pointer items-center text-start",A,I,o[V],v,c,s,_?"":j[V],"hover:bg-(--n-soft)","data-[panel-open]:text-(--n-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].filter(Boolean).join(" "),children:[d(N)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:N}):null,n("span",{className:`flex min-w-0 flex-1 flex-col ${h[V]}`,children:[d(x)?e("span",{className:`truncate font-semibold ${b[V]}`,children:x}):null,d(p)?e("span",{className:`truncate text-(--neba-muted-fg) ${m[V]}`,children:p}):null]}),e("span",{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[panel-open]:rotate-180"].join(" "),children:e(i,{})})]}),d(w)?e("span",{className:`flex shrink-0 items-center ${A}`,children:w}):null]}),e(t.Panel,{className:["h-(--accordion-panel-height) overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),children:e("div",{className:["text-(--neba-muted-fg)",u[V],A,"compact"===$?"pb-2":"pb-4"].join(" "),children:z})})]})});

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

@@ -0,0 +1,2 @@
+export { Accordion, AccordionItem } from './Accordion';
+export type { AccordionItemProps, AccordionProps } from './Accordion';

package/dist/components/accordion/index.js

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

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+export interface AlertProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * Drop shadow depth. `0` (the default) is flat. An alert belongs to the flow
+     * of the page it interrupts; the one that floats above it is a Toast.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * The heading line. With it the alert is two-part — a headline and the detail
+     * under it; without it the whole thing is one line.
+     */
+    title?: React.ReactNode;
+    /**
+     * The glyph at the start. Defaults to the one that goes with `color`; pass
+     * `false` to drop it, or a node to replace it. A node is sized in `em`, so it
+     * tracks whichever line it sits on.
+     */
+    icon?: React.ReactNode | false;
+    /**
+     * Content pinned to the end of the row — a "Retry" button, a link. Kept out
+     * of `children` so it stays on the first line while the message wraps.
+     */
+    action?: React.ReactNode;
+    /** Passing it is what makes the dismiss button appear. */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Accessible name of the dismiss button. */
+    closeLabel?: string;
+    /** The message. */
+    children?: React.ReactNode;
+}
+/**
+ * A message about something that happened, set into the page it is about.
+ *
+ * The three shapes people mean by "an alert" are one component with different
+ * slots filled rather than three components: a bare line
+ * (`<Alert icon={false}>`), a line with a glyph (the default), and a glyph with
+ * a headline and the detail under it (`title` plus `children`). Nothing about
+ * the surface changes between them — only how much of it is used.
+ *
+ * There is no Base UI primitive under this, and there should not be: an alert
+ * has no interaction to delegate. It is a live region with a layout, and the
+ * only interactive parts it can grow — the action and the dismiss button — are
+ * real buttons that the caller either passes in or gets by passing `onClose`.
+ */
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/alert/Alert.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{boxPaddingClasses as l}from"../box/Box";import{CloseIcon as i,severityIcons as s}from"../../internal/icons";import{controlSlots as a,hasContent as o,iconClasses as r,radiusClasses as c,sheetBodyClasses as d,sheetHeaderGapClasses as f,sheetSectionGapClasses as m,sheetTitleClasses as u,surfaceClasses as x,transitionClasses as b}from"../../internal/styles";const v={solid:[x,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[x,"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-(--n-soft)"},h={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"},p={solid:"",outline:"text-(--neba-muted-fg)",text:"text-(--neba-muted-fg)"},y={primary:"status",secondary:"status",info:"status",success:"status",warning:"alert",danger:"alert"};export const Alert=n.forwardRef(function({variant:n="outline",size:x="md",color:g="info",density:N="default",elevation:j=0,title:w,icon:k,action:$,onClose:_,closeLabel:z="Dismiss",className:B,style:C,children:A,...D},L){const R=void 0===k?s[g]:k,q=h[n],E=o(w);return t("div",{ref:L,role:y[g],className:["flex w-full items-start",l[N][x],c[x],m[x],d[x],b,v[n],r,B??""].filter(Boolean).join(" "),style:{...a(g,j,n),...C},...D,children:[o(R)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${q}`,children:R}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${f[x]}`,children:[E?e("div",{className:`neba-title font-semibold ${u[x]} ${q}`,children:w}):null,o(A)?e("div",{className:E?p[n]:void 0,children:A}):null]}),o($)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:$}):null,_?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e("button",{type:"button","aria-label":z,onClick:_,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(i,{})})}):null]})});

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

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

package/dist/components/alert/index.js

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

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import type { NebaCorner, NebaElevation, NebaStyleProps } from '../../types';
+export interface BadgeProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'content'> {
+    /**
+     * What the badge says — usually a count, sometimes a word.
+     *
+     * Omit it and the badge draws a dot instead, which is the honest thing when
+     * there is something to report but nothing to count.
+     */
+    content?: React.ReactNode;
+    /**
+     * Caps a numeric `content` and adds a `+`. Only applies when the content is
+     * actually a number: a badge cannot know how to truncate a word.
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Draws the marker as a dot even when there is content, keeping the content
+     * for screen readers only. For the corner that has to stay quiet.
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * Whether a `content` of `0` is shown. Off by default — zero unread messages
+     * is not news, and a badge that never goes away stops meaning anything.
+     * @default false
+     */
+    showZero?: boolean;
+    /**
+     * Hides the marker without unmounting the anchor. The badge keeps its place
+     * in the DOM, so showing it again does not relayout what it sits on.
+     * @default false
+     */
+    invisible?: boolean;
+    /**
+     * Which corner of the anchor it sits on.
+     * @default 'top-end'
+     */
+    placement?: NebaCorner;
+    /**
+     * The shape of the thing underneath, which is what decides how far the marker
+     * tucks in: a circle's corner is further from its centre than a square's, so
+     * a badge that looks right on an avatar hangs off an icon button.
+     * @default 'square'
+     */
+    overlap?: 'square' | 'circle';
+    /**
+     * Drop shadow depth. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * What a screen reader hears instead of the raw content. `content={3}` on a
+     * bell is "3" to a reader and means nothing; `label="3 unread notifications"`
+     * is the sentence.
+     */
+    label?: string;
+    /**
+     * What the badge is pinned to. Without it the badge is a standalone marker
+     * that lays out inline, which is what a status pill in a table cell is.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A small mark in the corner of something else: unread mail on an inbox icon,
+ * a status dot on an avatar, a count on a tab.
+ *
+ * The shell is a `<span>` that wraps the anchor and does nothing but establish a
+ * positioning context — no width, no padding, `align-middle` — so a badged icon
+ * button still measures and lines up exactly like a bare one. With no children
+ * the marker lays out inline instead, which is what a standalone status pill is.
+ *
+ * There is no Base UI primitive under this, and there should not be: a badge has
+ * no interaction, no state and no keyboard contract. It is a mark. Wiring it to
+ * a widget primitive would hand every decorative dot a role it cannot honour.
+ *
+ * What it does owe a screen reader is a sentence rather than a number, which is
+ * what `label` is for — `content={3}` beside a bell reads out as "3".
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/badge/Badge.js

@@ -0,0 +1 @@
+import{jsx as e,Fragment as t,jsxs as m}from"react/jsx-runtime";import*as n from"react";import{controlSlots as s,hasContent as o,srOnlyClasses as a,surfaceClasses as l,transitionClasses as i}from"../../internal/styles";const r={xs:"h-3.5 min-w-3.5",sm:"h-4 min-w-4",md:"h-4.5 min-w-4.5",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},d={xs:"size-1.5",sm:"size-2",md:"size-2.5",lg:"size-2.5",xl:"size-3"},b={xs:"text-[0.5625rem]",sm:"text-[0.625rem]",md:"text-[0.6875rem]",lg:"text-[0.75rem]",xl:"text-[0.8125rem]"},x={default:{xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},compact:{xs:"px-0.5",sm:"px-0.5",md:"px-1",lg:"px-1",xl:"px-1.5"}},p="rounded-full",c={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},g={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},f={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},h={solid:[l,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[l,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft-press)"};export const Badge=n.forwardRef(function({variant:n="solid",size:l="md",color:u="primary",density:v="default",elevation:w=0,content:j,max:y=99,dot:z=!1,showZero:N=!1,invisible:k=!1,placement:B="top-end",overlap:$="square",label:q,className:F,style:R,children:Z,...A},C){const D=o(Z),E=!o(j)||0===j&&!N,G=z||E,H=k||E&&!z,I=["pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","font-semibold tabular-nums whitespace-nowrap",p,i,h[n],G?d[l]:[r[l],b[l],x[v][l]].join(" "),D?`absolute ${g[B]}`:"relative align-middle",D?G?c[l].dot:c[l].badge:"",D&&"circle"===$?f[B]:"",H?"invisible":"",F??""].filter(Boolean).join(" "),J=function(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(j,y),K=e("span",{ref:C,className:I,style:{...s(u,w,n),...R},"aria-hidden":!!H||void 0,...A,children:H?null:m(t,{children:[G||q?e("span",{className:a,children:q??J}):null,G?null:e("span",{"aria-hidden":!!q||void 0,children:J})]})});return D?m("span",{className:"relative inline-flex shrink-0 align-middle",children:[Z,K]}):K});

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

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

package/dist/components/badge/index.js

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

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/box/Box.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaDensity, NebaElevation, NebaSize, NebaStyleProps } from '../../types';
+export interface BoxProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` (the default) is flat — the acrylic edge is what
+     * separates the box from the page. Raise it only for a surface that genuinely
+     * floats above the content around it.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * Inner padding, on the `size`/`density` scale below. Turn it off for
+     * full-bleed content — an image, a table, a list that draws its own rows.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<section />}`,
+     * `render={<li />}`, or a function for full control. Base UI's own escape
+     * hatch, so it behaves the same here as on every Base UI primitive.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * The same two density tracks as Button, applied on both axes rather than
+ * horizontally only: a control has a fixed height that its vertical padding
+ * would fight, and a box does not.
+ *
+ * The per-axis tables are the same numbers split apart, for Card — which turns
+ * this padding off and re-applies it section by section so its dividers can run
+ * the full width of the sheet. They live here so the two can never drift.
+ */
+export declare const boxPaddingClasses: Record<NebaDensity, Record<NebaSize, string>>;
+export declare const boxPaddingXClasses: Record<NebaDensity, Record<NebaSize, string>>;
+export declare const boxPaddingYClasses: Record<NebaDensity, Record<NebaSize, string>>;
+/**
+ * A sheet of acrylic with content on it. The plainest surface in the library:
+ * it groups things, and that is all it does.
+ *
+ * Everything structural — a title, a footer, dividers — belongs to Card, which
+ * is a Box with those sections laid out on it.
+ *
+ * `surfaceSlots` is the undyed slot set: the panel ladder points at the neutral
+ * `--neba-panel*` steps rather than at the family's own, which is what keeps a
+ * container's surface white. `color` reaches the hairline and the accent, and
+ * stops there.
+ */
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/box/Box.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as s}from"@base-ui/react/use-render";import{radiusClasses as o,surfaceClasses as a,surfaceSlots as p,transitionClasses as t}from"../../internal/styles";const l=o;export const boxPaddingClasses={default:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"},compact:{xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-4"}};export const boxPaddingXClasses={default:{xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}};export const boxPaddingYClasses={default:{xs:"py-2",sm:"py-3",md:"py-4",lg:"py-5",xl:"py-6"},compact:{xs:"py-1.5",sm:"py-2",md:"py-2.5",lg:"py-3",xl:"py-4"}};const n=["block",t].join(" "),r={solid:[a,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[a,"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"};export const Box=e.forwardRef(function({variant:e="outline",size:o="md",color:a="primary",density:t="default",elevation:x=0,padded:d=!0,render:i,className:m,style:c,children:b,...g},f){const y=[n,l[o],d?boxPaddingClasses[t][o]:"",r[e],m??""].filter(Boolean).join(" ");return s({render:i,ref:f,props:{className:y,style:{...p(a,x),...c},children:b,...g}})});

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

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

package/dist/components/box/index.js

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

package/dist/components/button/Button.d.ts

@@ -1,3 +1,25 @@
-export declare function Button({ text }: {
-    text: string;
-}): import("react/jsx-runtime").JSX.Element;
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+export interface ButtonProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` (the default) is flat — the acrylic edge is what
+     * separates the button from the page. Hover adds a level, press removes one.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /** Content placed before the label. Sized in `em`, so it tracks the label. */
+    startIcon?: React.ReactNode;
+    /** Content placed after the label. */
+    endIcon?: React.ReactNode;
+    /**
+     * Shows a spinner in place of `startIcon` and stops the button from
+     * activating, while keeping it focusable and visually unchanged otherwise.
+     */
+    loading?: boolean;
+    /** Inert but not dimmed — the action exists, it just is not available here. */
+    readOnly?: boolean;
+    /** Stretches to the width of the container. */
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;