neba 1.1.0 → 1.2.0

package/README.md

@@ -6,7 +6,7 @@
 
 ### 📘 [**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/)
+[![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.
 
@@ -32,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. |
+| [**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/)**
 
@@ -110,15 +111,17 @@ Placement props are logical, not physical — `start`/`end` rather than `left`/`
 
 ### 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
+**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, Carousel, Toolbar, Pill
+**Surfaces** — Box, Card, Accordion, Tabs, Carousel, Toolbar, Pill, Spoiler, ChatBubble
 
-**Display** — Typography, Blockquote, Highlight, Divider, Chip, Badge, Icon, Shortcut, Statistic, List, Table, Timeline
+**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: **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.
+**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/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/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>>;

package/dist/components/chat-bubble/ChatBubble.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{useMessages as a}from"../../internal/i18n";import{CheckIcon as l,ClockIcon as i,LinkIcon as t,severityIcons as o}from"../../internal/icons";import{controlSlots as s,hasContent as c,metaTextClasses as d,radiusClasses as m,sheetBodyClasses as p,sheetHeaderGapClasses as u,srOnlyClasses as b,surfaceClasses as f,transitionClasses as v}from"../../internal/styles";const x={default:{xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},compact:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-1.5",xl:"px-3.5 py-2"}},h={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},g={solid:[f,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[f,"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) [box-shadow:var(--n-elev)]"};function y(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const w={sending:e(i,{}),sent:e(l,{}),delivered:e(y,{}),read:e(y,{}),failed:o.danger},N={sending:"text-(--neba-muted-fg)",sent:"text-(--neba-muted-fg)",delivered:"text-(--neba-muted-fg)",read:"text-(--n-accent)",failed:"text-(--neba-danger-accent)"},k=["block overflow-hidden rounded-(--neba-radius-sm) border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","[transition-property: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"].join(" "),_=["shrink-0 opacity-0","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const ChatBubble=r.forwardRef(function({side:r="start",name:l,time:i,avatar:t,status:o,statusLabel:f,typing:y=!1,media:k,preview:L,actions:z,locale:B,variant:W="outline",size:M="md",color:R="primary",density:T="default",elevation:$=0,className:q,style:A,children:D,...E},F){const G=a(B),H="end"===r,I=c(l)||c(i),J=y||c(D)||Boolean(L),K=["flex min-w-0 flex-col overflow-hidden",m[M],h[r],g[W],v].join(" "),O=o?f??G.chat[o]:"";return n("div",{ref:F,className:["group/bubble flex w-full items-start gap-2",H?"flex-row-reverse":"",q??""].filter(Boolean).join(" "),style:{...s(R,$,W),...A},...E,children:[c(t)?e("div",{className:"shrink-0",children:t}):null,n("div",{className:["flex min-w-0 max-w-[min(100%,32rem)] flex-col",u[M],H?"items-end":"items-start"].join(" "),children:[I?n("div",{className:`flex items-baseline gap-2 ${d[M]}`,children:[c(l)?e("span",{className:"font-semibold",children:l}):null,c(i)?e("span",{className:"text-(--neba-muted-fg)",children:i}):null]}):null,n("div",{className:"flex min-w-0 items-center gap-1 "+(H?"flex-row-reverse":""),children:[n("div",{className:K,children:[c(k)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:k}):null,J?n("div",{className:[x[T][M],"flex min-w-0 flex-col gap-2",p[M]].join(" "),children:[y?e(j,{label:G.chat.typing}):c(D)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:D}):null,L?e(C,{preview:L}):null]}):null]}),c(z)?e("div",{className:_,children:z}):null]}),o?n("div",{className:["flex items-center gap-1",d[M],N[o],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[w[o],e("span",{className:b,children:O})]}):null]})]})});function j({label:r}){return n("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(n=>e("span",{"aria-hidden":"true",className:"neba-typing-dot size-[0.45em] rounded-full",style:{"--n-i":n}},n)),e("span",{className:b,children:r})]})}function C({preview:r}){const{url:a,title:l,description:i,image:o,site:s,newTab:d=!1}=r;return n("a",{href:a,target:d?"_blank":void 0,rel:d?"noopener noreferrer":void 0,className:k,children:[o?e("img",{src:o,alt:"",className:"block h-28 w-full object-cover"}):null,n("div",{className:"flex flex-col gap-0.5 p-2",children:[c(s)?n("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(t,{}),e("span",{className:"truncate",children:s})]}):null,c(l)?e("span",{className:"font-semibold",children:l}):null,c(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]})}

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

@@ -0,0 +1,2 @@
+export { ChatBubble } from './ChatBubble';
+export type { ChatBubbleLinkPreview, ChatBubbleProps, ChatBubbleSide, ChatBubbleStatus } from './ChatBubble';

package/dist/components/chat-bubble/index.js

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

package/dist/components/otp-field/OtpField.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+/**
+ * What may be typed into a slot.
+ *
+ * `numeric` is the default because that is what a texted code is, and it is also
+ * what puts a number pad in front of a phone. `any` accepts whatever the
+ * keyboard produces — for a licence key with punctuation in it.
+ */
+export type OtpFieldCharset = 'numeric' | 'alpha' | 'alphanumeric' | 'any';
+export interface OtpFieldProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'children'> {
+    /**
+     * Drop shadow depth. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * How many characters the code has. Clamped to 2–12: a single box is a
+     * TextField, and past twelve the row stops fitting a phone.
+     * @default 6
+     */
+    length?: number;
+    /**
+     * What may be typed. Anything rejected is dropped rather than shown, and
+     * `onValueInvalid` reports it.
+     * @default 'numeric'
+     */
+    charset?: OtpFieldCharset;
+    /** Hides the characters, the way a password field does. @default false */
+    mask?: boolean;
+    /**
+     * Splits the row every `groupSize` slots with a separator. `3` on a six digit
+     * code gives the familiar two blocks of three.
+     */
+    groupSize?: number;
+    /** What is drawn between two groups. @default '–' */
+    separator?: React.ReactNode;
+    /** The code. Use with `onValueChange` for a controlled field. */
+    value?: string;
+    /** What it starts as, for an uncontrolled one. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fires once every slot is filled — the moment to verify the code. */
+    onComplete?: (value: string) => void;
+    /** Fires when typed or pasted text held characters the charset rejects. */
+    onValueInvalid?: (value: string) => void;
+    /** Submits the owning form as soon as the code is complete. @default false */
+    autoSubmit?: boolean;
+    /** Label above the row, wired to the slots by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text below the row. */
+    description?: React.ReactNode;
+    /** Error message below the row. Its presence also turns the field invalid. */
+    error?: React.ReactNode;
+    /**
+     * Forces the invalid state without a message — for when a form library owns
+     * the validity. Defaults to whether `error` has content.
+     */
+    invalid?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    /** The form must have a complete code before it submits. @default false */
+    required?: boolean;
+    /** Unavailable. Every slot stops answering. */
+    disabled?: boolean;
+    /** Readable and copyable, but not typeable. @default false */
+    readOnly?: boolean;
+    /** Puts the caret in the first slot on mount. @default false */
+    autoFocus?: boolean;
+}
+/**
+ * A row of one-character slots: a PIN, a texted verification code, an invite
+ * key.
+ *
+ * Base UI owns everything that makes this harder than it looks — one hidden
+ * value behind however many inputs, paste spread across the slots from wherever
+ * the caret was, backspace stepping back a box, a click landing on the first
+ * empty slot rather than the one under the pointer, and the autofill hook that
+ * lets a phone offer the code straight from the message.
+ *
+ * What is here is the ladder a slot is drawn on and the field shell it shares
+ * with TextField and Select — a slot is a field-shaped box, and a form holding
+ * both should not look like two form kits stacked on each other.
+ */
+export declare const OtpField: React.ForwardRefExoticComponent<OtpFieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/otp-field/OtpField.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as n}from"@base-ui/react/field";import{OTPField as l}from"@base-ui/react/otp-field";import{cx as r,disabledClasses as o,fieldReadOnlyClasses as i,fieldRestClasses as s,metaTextClasses as m,stackGapClasses as d,surfaceSlots as u,transitionClasses as c}from"../../internal/styles";const p={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},f={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},x={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},g={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},h={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const OtpField=t.forwardRef(function({variant:b="outline",size:y="md",color:v="primary",density:N="default",elevation:V=0,length:w=6,charset:C="numeric",mask:F=!1,groupSize:M,separator:j="–",value:I,defaultValue:O,onValueChange:R,onComplete:S,onValueInvalid:k,autoSubmit:q=!1,label:z,description:_,error:A,invalid:D,name:E,required:L=!1,disabled:T=!1,readOnly:B=!1,autoFocus:G=!1,className:H,style:J,...K},P){const Q=Math.min(12,Math.max(2,Math.round(w))),U=null!=A&&!1!==A&&""!==A,W=D??U,X=W?"danger":v,Y=r("text-center font-medium [font-family:inherit]",p[y],x[y],f[y],c,"caret-(--n-accent) selection:bg-(--n-soft-press)","focus:[outline:2px_solid_var(--n-ring)] focus:outline-offset-1","focus:[transition-duration:0ms]",T?o[b]:B?i[b]:s[b]),Z=M&&M>0?Math.round(M):0;return a(n.Root,{disabled:T,invalid:W,className:r("inline-flex flex-col align-top",d[y],H),style:{...u(X,V),...J},children:[z?e(n.Label,{className:r(m[y],"font-medium",T?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:z}):null,e(l.Root,{ref:P,length:Q,validationType:h[C],mask:F,name:E,required:L,disabled:T,readOnly:B,autoSubmit:q,value:I,defaultValue:O,onValueChange:e=>R?.(e),onValueComplete:e=>S?.(e),onValueInvalid:e=>k?.(e),className:r("flex items-center",g[N][y]),...K,children:Array.from({length:Q},(n,o)=>a(t.Fragment,{children:[Z>0&&o>0&&o%Z===0?e("span",{"aria-hidden":"true",className:r("select-none px-0.5 text-(--neba-muted-fg)",x[y]),children:j}):null,e(l.Input,{className:Y,autoFocus:G&&0===o})]},o))}),_?e(n.Description,{className:r(m[y],"text-(--neba-muted-fg)"),children:_}):null,U?e(n.Error,{match:!0,className:r(m[y],"text-(--n-accent)"),children:A}):null]})});

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

@@ -0,0 +1,2 @@
+export { OtpField } from './OtpField';
+export type { OtpFieldCharset, OtpFieldProps } from './OtpField';

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

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

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