neba 1.1.0 → 1.3.0

package/dist/components/animate-slide/AnimateSlide.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateMode, NebaAnimateProps, NebaSide } from '../../types';
+export interface AnimateSlideProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content slides in or slides away. `out` leaves by the same edge
+     * it would have come from.
+     * @default 'in'
+     */
+    mode?: NebaAnimateMode;
+    /**
+     * Which edge it travels from. Physical, as `NebaSide` is everywhere — a panel
+     * sliding down from the top comes from the top in every writing direction.
+     * @default 'bottom'
+     */
+    from?: NebaSide;
+    /**
+     * How far it travels — a CSS length, or a number in pixels. `'100%'` is the
+     * element's own width or height, which is what makes it appear from behind
+     * its own edge.
+     * @default '100%'
+     */
+    distance?: number | string;
+    /**
+     * Fades in as it slides.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content travelling in from one edge.
+ *
+ * The default distance is the element's own size, so it starts exactly out of
+ * frame and arrives without ever having been half drawn somewhere it does not
+ * belong. Put it in a box with `overflow: hidden` and the effect is a panel
+ * appearing from behind that box's edge.
+ *
+ * A slide moves the element, so what is *around* it does not move: this is a
+ * `translate`, not a change of layout, and nothing on the page reflows while it
+ * runs. For a much shorter travel over a list of things, one after another, use
+ * AnimateAppear.
+ */
+export declare const AnimateSlide: React.ForwardRefExoticComponent<AnimateSlideProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-slide/AnimateSlide.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate";import{cx as o}from"../../internal/styles";export const AnimateSlide=e.forwardRef(function({duration:e=380,delay:i=0,easing:s,repeat:l=1,alternate:d,paused:m,trigger:p="mount",play:c,once:f=!0,threshold:y=.2,mode:u="in",from:g="bottom",distance:h="100%",fade:x=!0,render:N,className:b,style:w,children:A,...R},S){const{x:j,y:k}=a(g,h),q=n({effect:"slide",duration:e,delay:i,easing:s,repeat:l,alternate:d,mode:u,x:j,y:k,opacity:x?0:1,trigger:p,play:c,once:f,threshold:y,paused:m,infinite:t(l)});return r({render:N,ref:[S,q.ref],props:{...R,className:o(q.className,b),style:{...q.style,...w},...q.props,children:A}})});

package/dist/components/animate-slide/index.d.ts

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

package/dist/components/animate-slide/index.js

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

package/dist/components/animate-typing/AnimateTyping.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { NebaAnimateProps } from '../../types';
+export interface AnimateTypingProps extends Omit<NebaAnimateProps, 'alternate' | 'easing'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /**
+     * The text, when it is easier to pass than to nest. Overrides `children`.
+     */
+    text?: string;
+    /**
+     * How fast it is typed, in characters per second.
+     * @default 24
+     */
+    speed?: number;
+    /**
+     * How long the finished text is held before it repeats, in milliseconds.
+     * @default 1400
+     */
+    hold?: number;
+    /**
+     * Deletes the text again before repeating, rather than clearing it in one
+     * frame. Only means anything when `repeat` is more than once.
+     * @default false
+     */
+    erase?: boolean;
+    /**
+     * How fast it is deleted, in characters per second. Deleting is usually about
+     * twice as fast as typing, which is what a person actually does.
+     * @default twice `speed`
+     */
+    eraseSpeed?: number;
+    /**
+     * The block after the text.
+     * @default true
+     */
+    caret?: boolean;
+    /** What the caret is drawn as. @default '|' */
+    caretChar?: React.ReactNode;
+    /** The text to type. Only text is typed — see below. */
+    children?: React.ReactNode;
+}
+/**
+ * Text appearing one character at a time.
+ *
+ * The whole string is in the document from the first frame — in a clipped box
+ * for a screen reader, which reads it once and is not made to sit through the
+ * performance — and what animates is a visible copy that is `aria-hidden`. So
+ * the effect costs a reader who cannot see it nothing, and costs a reader who
+ * can nothing either: the box is not laid out from the characters that have
+ * arrived, so the text around it does not reflow on every frame.
+ *
+ * `repeat`, `hold` and `erase` are what make it a loop: type, hold, delete,
+ * type again. Without `erase` a repeat clears in one frame, which is right for
+ * a line that is being replaced rather than rewritten.
+ *
+ * Only text is typed. Pass a string, or strings; an element among the children
+ * contributes its text and nothing about its markup, because there is no honest
+ * way to reveal half of a link.
+ */
+export declare const AnimateTyping: React.ForwardRefExoticComponent<AnimateTypingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-typing/AnimateTyping.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{isInfinite as n,useAnimationRun as a,usePrefersReducedMotion as i}from"../../internal/animate";import{cx as s,srOnlyClasses as o}from"../../internal/styles";function u(e){return"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(u).join(""):""}export const AnimateTyping=r.forwardRef(function({text:c,speed:m=24,hold:f=1400,erase:l=!1,eraseSpeed:d,caret:p=!0,caretChar:h="|",duration:g,delay:y=0,repeat:x=1,paused:T,trigger:j="mount",play:v,once:N=!0,threshold:S=.2,className:w,style:M,children:b,...A},I){const E=a({trigger:j,play:v,once:N,threshold:S,paused:T,infinite:n(x)}),R=i(),C=c??u(b),k=r.useMemo(()=>function(e,t){if("undefined"!=typeof Intl&&"Segmenter"in Intl)return[...new Intl.Segmenter(t,{granularity:"grapheme"}).segment(e)].map(e=>e.segment);return[...e]}(C),[C]),q=k.length,[z,B]=r.useState(0),D=r.useRef(0),F=g&&q>0?g/q:1e3/Math.max(m,1),G=1e3/Math.max(d??2*m,1);return r.useEffect(()=>{D.current=0},[q]),r.useEffect(()=>{if(R||0===q)return void B(q);if(!E.started)return D.current=0,void B(0);if(T)return;let e,t=!1,r=D.current,n=1,a=!1;const i="infinite"===x?1/0:Math.max(1,x);if(r>=q&&1===i)return;const s=()=>{if(!t){if(a)return r-=1,D.current=r,B(r),r<=0&&(a=!1,n+=1),void(e=setTimeout(s,a?G:F));if(r+=1,D.current=r,B(r),r<q)e=setTimeout(s,F);else if(!(n>=i)){if(l)return a=!0,void(e=setTimeout(s,f));n+=1,e=setTimeout(()=>{t||(r=0,D.current=0,B(0),e=setTimeout(s,F))},f)}}};return B(r),e=setTimeout(s,0===r?y:F),()=>{t=!0,clearTimeout(e)}},[E.started,T,R,q,F,G,y,f,l,x]),t("div",{ref:e=>{E.ref(e),"function"==typeof I?I(e):I&&(I.current=e)},className:w,style:M,"data-neba-animation":"typing","data-state":E.state,...E.handlers,...A,children:[e("span",{className:o,children:C}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:[k.slice(0,z).join(""),p?e("span",{className:s("neba-typing-caret"),children:h}):null]})]})});

package/dist/components/animate-typing/index.d.ts

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

package/dist/components/animate-typing/index.js

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

package/dist/components/animate-zoom/AnimateZoom.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAnimateMode, NebaAnimateProps } from '../../types';
+export interface AnimateZoomProps extends NebaAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content comes forward or falls away.
+     * @default 'in'
+     */
+    mode?: NebaAnimateMode;
+    /**
+     * The scale it starts from, as a multiple of its final size. Above `1` it
+     * arrives oversized and settles back, which reads as coming *towards* the
+     * reader rather than up out of the page.
+     * @default 0.4
+     */
+    from?: number;
+    /**
+     * Fades in as it zooms.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content arriving from the middle of where it will end up.
+ *
+ * The same arithmetic as Grow at more than twice the distance, and always about
+ * the centre — which is the whole difference. A Grow unfolds from somewhere; a
+ * Zoom comes at you. Use it for the one thing on a screen that is meant to
+ * interrupt: a confirmation, a result, a number that just landed.
+ *
+ * There is no `origin`, on purpose. A zoom anchored to a corner is a grow, and
+ * the library does not offer two spellings of one idea.
+ */
+export declare const AnimateZoom: React.ForwardRefExoticComponent<AnimateZoomProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-zoom/AnimateZoom.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate";import{cx as n}from"../../internal/styles";export const AnimateZoom=e.forwardRef(function({duration:e=340,delay:o=0,easing:s,repeat:i=1,alternate:l,paused:m,trigger:d="mount",play:c,once:p=!0,threshold:f=.2,mode:u="in",from:y=.4,fade:g=!0,render:h,className:N,style:b,children:w,...x},z){const A=a({effect:"zoom",duration:e,delay:o,easing:s,repeat:i,alternate:l,mode:u,scale:y,opacity:g?0:1,trigger:d,play:c,once:p,threshold:f,paused:m,infinite:t(i)});return r({render:h,ref:[z,A.ref],props:{...x,className:n(A.className,N),style:{transformOrigin:"center",...A.style,...b},...A.props,children:w}})});

package/dist/components/animate-zoom/index.d.ts

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

package/dist/components/animate-zoom/index.js

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

package/dist/components/aspect-ratio/AspectRatio.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaSize } from '../../types';
+/**
+ * How the media inside is fitted to the box, spelled the way CSS spells it.
+ *
+ * These are `object-fit`'s own values rather than a nicer set of words, for the
+ * same reason `NebaPosition` keeps `static`/`sticky`/`fixed`: inventing
+ * `fill-the-box` would only make a reader look up which CSS it maps to.
+ */
+export type NebaAspectFit = 'cover' | 'contain' | 'fill' | 'none';
+export interface AspectRatioProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The proportion the box holds, written the way CSS writes it — a number
+     * (`1.5`) or a ratio (`'16 / 9'`). Both reach `aspect-ratio` untouched.
+     * @default 1
+     */
+    ratio?: number | string;
+    /**
+     * How a single piece of media inside is fitted. Applies to an `img`, a
+     * `video`, a `canvas`, an `svg` or an `iframe` that is a direct child; those
+     * are stretched to the full box and then fitted. Anything else is laid out
+     * normally and this prop does not reach it.
+     * @default 'cover'
+     */
+    fit?: NebaAspectFit;
+    /**
+     * Rounds the corners to the `size` step of the house radius ladder.
+     *
+     * Off by default. A layout component draws nothing, and a photograph with its
+     * corners cut is a decision about the photograph — but it is such a common one
+     * that making the caller reach for a `className` would be perverse.
+     * @default false
+     */
+    rounded?: boolean;
+    /**
+     * Which step of the radius ladder `rounded` uses. As on Box, `size` here is
+     * the size of the *sheet* — there is no height and no type scale on a box
+     * whose whole job is a proportion.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /**
+     * Renders something other than a `<div>`: `render={<figure />}`,
+     * `render={<a href="…" />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A box that keeps a proportion whatever width it is given.
+ *
+ * It draws nothing — no surface, no border, no shadow — which is what puts it in
+ * `layout` beside Container and Grid rather than in `surfaces`. What it does is
+ * reserve the space: a card whose image arrives late does not reflow the page
+ * around it, and a row of thumbnails is a row of one shape.
+ *
+ * The proportion is CSS's own `aspect-ratio`, so a caller who already knows
+ * `16 / 9` has nothing to translate. `fit` is the one convenience on top: the
+ * media inside is stretched to the box and then fitted, which is the pair of
+ * declarations every use of this component would otherwise start with.
+ */
+export declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/aspect-ratio/AspectRatio.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as i}from"@base-ui/react/use-render";import{radiusClasses as o}from"../../internal/styles";const t=["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),c={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const AspectRatio=e.forwardRef(function({ratio:e=1,fit:r="cover",rounded:l=!1,size:n="md",render:s,className:a,style:f,children:m,...u},d){const b=["relative block w-full overflow-hidden",t,c[r],l?o[n]:"",a??""].filter(Boolean).join(" ");return i({render:s,ref:d,props:{className:b,style:{aspectRatio:e,...f},children:m,...u}})});

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1,2 @@
+export { AspectRatio } from './AspectRatio';
+export type { AspectRatioProps, NebaAspectFit } from './AspectRatio';

package/dist/components/aspect-ratio/index.js

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

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

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import type { NebaColor, NebaElevation, NebaSize, NebaTransition, 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;
+    /**
+     * An entrance animation, run once on mount: `transition="fade"`, or an object
+     * for the details. For a trigger, a replay or anything under your own
+     * control, wrap it in an `Animate*` component instead.
+     */
+    transition?: NebaTransition;
+    /**
+     * 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 t}from"react/jsx-runtime";import*as r from"react";import{Avatar as n}from"@base-ui/react/avatar";import{transitionProps as a}from"../../internal/animate";import{controlHeightClasses as o,controlSlots as l,controlSquareClasses as s,hasContent as i,srOnlyClasses as d,surfaceClasses as c,transitionClasses as m}from"../../internal/styles";const f={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},u={xs:"rounded-[0.375rem]",sm:"rounded-[0.4375rem]",md:"rounded-[0.5625rem]",lg:"rounded-[0.6875rem]",xl:"rounded-[0.875rem]"},x={solid:[c,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev)]"].join(" "),outline:[c,"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)]"},h="after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit]",v={solid:`${h} after:[box-shadow:var(--neba-plate-solid)]`,outline:`${h} after:[box-shadow:var(--neba-plate-glass)]`,text:""},p=["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%]",m].join(" ");function g(){return t("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=r.forwardRef(function({src:r,srcSet:c,alt:m,name:h,initials:b,shape:w="circle",variant:y="text",size:j="md",color:N="primary",elevation:z=0,delay:C,imageProps:A,onLoadingStatusChange:B,transition:S,className:k,style:L,children:F,...M},R){const Z=h?function(e){const t=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===t.length?"":((Array.from(t[0])[0]??"")+(t.length>1?Array.from(t[t.length-1])[0]??"":"")).toLocaleUpperCase()}(h):"",$=a(S),_=m??h,I=i(F)?F:(b??Z)||e(g,{}),P=i(F)||Boolean(b??Z),U=[p,o[j],s[j],f[j],"circle"===w?"rounded-full":u[j],x[y],v[y],$.className,k??""].filter(Boolean).join(" ");return t(n.Root,{ref:R,className:U,style:{...l(N,z,y),...$.style,...L},...M,children:[r?e(n.Image,{src:r,srcSet:c,alt:_??"",className:"size-full object-cover",onLoadingStatusChange:B,...A}):null,t(n.Fallback,{delay:r?C:void 0,className:"flex size-full items-center justify-center",children:[_&&P?e("span",{className:d,children:_}):null,e("span",{"aria-hidden":!(!_||!P)||void 0,className:"contents",children:I})]})]})});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps } from '../../types';
+import type { NebaElevation, NebaStyleProps, NebaTransition } 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
@@ -14,6 +14,12 @@ export interface BlockquoteProps extends NebaStyleProps, Omit<React.ComponentPro
      * @default 0
      */
     elevation?: NebaElevation;
+    /**
+     * An entrance animation, run once on mount: `transition="fade"`, or an object
+     * for the details. For a trigger, a replay or anything under your own
+     * control, wrap it in an `Animate*` component instead.
+     */
+    transition?: NebaTransition;
     /**
      * 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

package/dist/components/blockquote/Blockquote.js

@@ -1 +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})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{boxPaddingClasses as n}from"../box/Box";import{transitionProps as a}from"../../internal/animate";import{hasContent as l,metaTextClasses as o,radiusClasses as i,surfaceClasses as s,surfaceSlots as c,transitionClasses as m}from"../../internal/styles";const d={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]"},x="border-s-2 [border-inline-start-color:var(--n-accent)]",f={solid:[s,"bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[s,"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 u(){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:s="md",color:b="primary",density:p="default",elevation:h=0,author:v,source:g,cite:N,icon:j,transition:y,className:w,style:B,children:k,...z},q){const M=a(y),Z=l(v)||l(g),C=void 0===j?e(u,{}):j,R=["flex flex-col text-(--neba-fg)",x,"text"===t?"":`${i[s]} rounded-s-none`,f[t],n[p][s],m,M.className,w??""].filter(Boolean).join(" "),$=r("blockquote",{cite:N,className:d[s],children:[l(C)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] text-(--n-soft-press) [&>svg]:size-full",children:C}):null,k]}),A={...c(b,h),...M.style,...B};return Z?r("figure",{ref:q,className:R,style:A,...z,children:[$,r("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5 text-(--neba-muted-fg)",o[s]].join(" "),children:[l(v)?r("span",{className:"font-medium text-(--neba-fg)",children:[e("span",{"aria-hidden":"true",children:"— "}),v]}):null,l(g)?e("cite",{className:"not-italic",children:g}):null]})]}):e("div",{ref:q,className:R,style:A,...z,children:$})});

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaDensity, NebaElevation, NebaSize, NebaStyleProps } from '../../types';
+import type { NebaDensity, NebaElevation, NebaSize, NebaStyleProps, NebaTransition } 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
@@ -15,6 +15,12 @@ export interface BoxProps extends NebaStyleProps, Omit<React.ComponentPropsWitho
      * @default true
      */
     padded?: boolean;
+    /**
+     * An entrance animation, run once on mount: `transition="fade"`, or an object
+     * for the details. For a trigger, a replay or anything under your own
+     * control, wrap the Box in an `Animate*` component instead.
+     */
+    transition?: NebaTransition;
     /**
      * Renders something other than a `<div>`: `render={<section />}`,
      * `render={<li />}`, or a function for full control. Base UI's own escape

package/dist/components/box/Box.js

@@ -1 +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}})});
+import*as e from"react";import{useRender as a}from"@base-ui/react/use-render";import{transitionProps as s}from"../../internal/animate";import{radiusClasses as o,surfaceClasses as t,surfaceSlots as n,transitionClasses as p}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 r=["block",p].join(" "),x={solid:[t,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[t,"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:t="primary",density:p="default",elevation:d=0,padded:i=!0,transition:m,render:c,className:b,style:g,children:f,...y},u){const v=s(m),h=[r,l[o],i?boxPaddingClasses[p][o]:"",x[e],v.className,b??""].filter(Boolean).join(" ");return a({render:c,ref:u,props:{className:h,style:{...n(t,d),...v.style,...g},children:f,...y}})});

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