neba 1.2.0 → 1.4.0

package/dist/components/icon/Icon.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{iconSizeClasses as i}from"../../internal/styles";const n={xs:"text-[0.875rem]",sm:"text-[1rem]",md:"text-[1.25rem]",lg:"text-[1.5rem]",xl:"text-[1.75rem]"};export const Icon=t.forwardRef(function({icon:t,size:r="md",color:l="inherit",label:s,className:a,style:o,...c},m){const f=["inline-flex shrink-0 items-center justify-center align-middle",i[r],"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",`leading-none ${n[r]}`,"inherit"===l?"":"text-(--n-accent)",a??""].filter(Boolean).join(" ");return e("span",{ref:m,className:f,style:"inherit"===l?o:{"--n-accent":`var(--neba-${l}-accent)`,...o},role:s?"img":void 0,"aria-label":s,"aria-hidden":!s||void 0,...c,children:t})});
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{transitionProps as i}from"../../internal/animate";import{iconSizeClasses as n}from"../../internal/styles";const r={xs:"text-[0.875rem]",sm:"text-[1rem]",md:"text-[1.25rem]",lg:"text-[1.5rem]",xl:"text-[1.75rem]"};export const Icon=t.forwardRef(function({icon:t,size:l="md",color:a="inherit",label:s,transition:o,className:m,style:c,...f},x){const d=i(o),g=["inline-flex shrink-0 items-center justify-center align-middle",n[l],"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",`leading-none ${r[l]}`,"inherit"===a?"":"text-(--n-accent)",d.className,m??""].filter(Boolean).join(" ");return e("span",{ref:x,className:g,style:"inherit"===a?{...d.style,...c}:{"--n-accent":`var(--neba-${a}-accent)`,...d.style,...c},role:s?"img":void 0,"aria-label":s,"aria-hidden":!s||void 0,...f,children:t})});

package/dist/components/mockup/Mockup.d.ts

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaMockupBezel, NebaMockupDevice, NebaMockupFinish, NebaMockupHardware, NebaMockupNotch, NebaMockupOrientation, NebaMockupOs, NebaMockupResolution } from '../../internal/mockup';
+import type { NebaColor, NebaElevation, NebaSize, NebaTransition } from '../../types';
+export type { NebaMockupBezel, NebaMockupDevice, NebaMockupFinish, NebaMockupHardware, NebaMockupNotch, NebaMockupOrientation, NebaMockupOs, NebaMockupResolution } from '../../internal/mockup';
+export interface MockupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which machine this is a picture of. The one prop with no default: a mockup
+     * that has not said what it is a mockup of has not said anything.
+     */
+    device: NebaMockupDevice;
+    /**
+     * The system whose chrome is drawn on the screen. A desktop runs `macos`,
+     * `windows` or `linux`; a tablet runs `ipados` or `android`; a phone runs `ios`
+     * or `android`. Anything else falls back to the device's own default —
+     * `macos`, `ipados` and `ios` respectively.
+     */
+    os?: NebaMockupOs;
+    /**
+     * What holds a desktop screen up: a stand under it, or a keyboard in front of
+     * it. Ignored on a tablet and a phone, which hold themselves up.
+     * @default 'monitor'
+     */
+    hardware?: NebaMockupHardware;
+    /**
+     * How big the device is, on a five-step ladder of real resolutions per device
+     * — from a 320-wide phone to a 430-wide one, from a 1024-wide desktop to a
+     * 1920-wide one.
+     *
+     * As on Box, `size` here does not set a height or a type scale. What it sets
+     * is the resolution of the screen, which is the only thing about a device
+     * there is to scale. `resolution` overrides it outright.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /**
+     * The screen's logical resolution in CSS pixels, when none of the five steps
+     * is the machine you mean. This is the viewport the content is laid out
+     * against, not the panel's physical pixel count.
+     */
+    resolution?: NebaMockupResolution;
+    /**
+     * Which way a handheld is held. Landscape turns the screen, the bezel and the
+     * cut-out together. Ignored on a desktop, whose stand does not turn with it.
+     * @default 'portrait'
+     */
+    orientation?: NebaMockupOrientation;
+    /**
+     * How much hardware there is around the screen. `none` is not a thinner
+     * bezel — it is no hardware at all, leaving the screen on its own with its
+     * corners cut, which is what a mockup that only wants the viewport asks for.
+     * `thick` is an older device: narrow sides, a forehead and a chin.
+     * @default 'standard'
+     */
+    bezel?: NebaMockupBezel;
+    /**
+     * What the hardware is made of. Fixed colours rather than theme tokens — a
+     * graphite phone stays graphite on a page switched to dark.
+     * @default 'graphite'
+     */
+    finish?: NebaMockupFinish;
+    /**
+     * The camera cut-out. Hardware rather than chrome, so it is drawn whether or
+     * not `systemUi` is on. Defaults to what the device would have: a dynamic
+     * island on an iOS phone, a punch hole on an Android one, nothing anywhere
+     * else.
+     */
+    notch?: NebaMockupNotch;
+    /**
+     * Draws the system's own bars — a status bar and a home indicator, a menu bar
+     * and a dock, a taskbar. Each one takes its own space rather than covering the
+     * content, so turning it off gives the screen back to `children` rather than
+     * uncovering anything.
+     * @default true
+     */
+    systemUi?: boolean;
+    /**
+     * Whether content taller than the screen scrolls. Off, it is clipped, which is
+     * what a still picture of a device wants.
+     * @default false
+     */
+    scroll?: boolean;
+    /**
+     * What is behind the content: any CSS `background` value — a colour, a
+     * gradient, a `url()`.
+     * @default the page's own surface colour
+     */
+    wallpaper?: string;
+    /**
+     * The clock in the status bar or the taskbar, and the only text the chrome
+     * draws. A string rather than a `Date`, because a mockup's clock is a prop of
+     * the picture and reading the real one would differ between the server that
+     * renders the page and the browser that hydrates it.
+     * @default '9:41'
+     */
+    time?: string;
+    /**
+     * The rendered width of the whole device on the page — a number in pixels or
+     * any CSS length. The device is laid out at its own resolution and then scaled
+     * to whatever this comes to, so the content inside is genuinely a screen's
+     * worth rather than a page's worth shrunk.
+     * @default '100%'
+     */
+    width?: number | string;
+    /**
+     * The rendered height. Given on its own it decides the size and the width
+     * follows the device's proportion, which is what a mockup in a row of fixed
+     * height wants.
+     */
+    height?: number | string;
+    /** Reaches the accent in the chrome — a dock's first icon, a taskbar's. */
+    color?: NebaColor;
+    /**
+     * How far off the page the device sits. Drawn as a silhouette rather than a
+     * box, so the shadow follows a lid on a neck on a foot, and it does not shrink
+     * with the device.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * An entrance animation, run once on mount: `transition="fade"`, or an object
+     * for the details.
+     */
+    transition?: NebaTransition;
+    /** Renders something other than a `<div>`: `render={<figure />}`. */
+    render?: useRender.RenderProp;
+    /** What is on the screen. */
+    children?: React.ReactNode;
+}
+/**
+ * A device with a screen you can put anything on: a phone, a tablet, a monitor
+ * or a laptop, with the system's own bars drawn on it.
+ *
+ * The screen is a viewport at the device's own resolution — a `md` phone is 390
+ * by 844 CSS pixels — and the whole device is then scaled once to whatever room
+ * it has been given. So the content inside is laid out against a screen rather
+ * than against the page: a 390-pixel column wraps where it would wrap on a
+ * phone, and the mockup can be 200 pixels wide on the page without the content
+ * knowing.
+ *
+ * That scale is a `transform`, and it is the one place in the library where one
+ * is used. The rule it is an exception to is about controls, where a scale
+ * resamples a label under the pointer that is pressing it. Nothing here is
+ * pressed and the scale never changes on an interaction: it is set once from the
+ * space available, which is the only way to draw a 1440-pixel desktop in a
+ * paragraph's width at all.
+ *
+ * The screen is also a container (`neba-screen`), so content inside can answer
+ * to the device's width with a container query rather than to the window's.
+ */
+export declare const Mockup: React.ForwardRefExoticComponent<MockupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/mockup/Mockup.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{useRender as n}from"@base-ui/react/use-render";import{transitionProps as a}from"../../internal/animate";import{MockupCutout as o,defaultNotch as s,elevationFilters as d,finishSlots as h,mockupChrome as l,mockupMetrics as c,resolveOs as u,shellClasses as f}from"../../internal/mockup";import{surfaceSlots as m}from"../../internal/styles";const p="undefined"==typeof document?r.useEffect:r.useLayoutEffect;export const Mockup=r.forwardRef(function({device:g,os:b,hardware:v="monitor",size:w="md",resolution:y,orientation:x="portrait",bezel:k="standard",finish:R="graphite",notch:N,systemUi:z=!0,scroll:$=!1,wallpaper:M,time:j="9:41",width:W,height:B,color:H="primary",elevation:C=0,transition:E,render:L,className:O,style:P,children:S,...F},I){const T=u(g,b),U=N??s(g,T),q="desktop"!==g&&"landscape"===x,A=c({device:g,size:w,resolution:y,orientation:x,bezel:k,hardware:v}),{screen:D,frame:G,body:J,stand:K,base:Q}=A,V=r.useRef(null),[X,Y]=r.useState(null);p(()=>{const e=V.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect();if(t.width<=0||t.height<=0)return;const i=Math.min(t.width/G.width,t.height/G.height);Y(e=>null!==e&&Math.abs(e-i)<1e-4?e:i)};if(t(),"undefined"==typeof ResizeObserver)return;const i=new ResizeObserver(t);return i.observe(e),()=>i.disconnect()},[G.width,G.height]);const Z=r.useCallback(e=>{V.current=e,"function"==typeof I?I(e):I&&(I.current=e)},[I]),_=z?l({os:T,notch:U,landscape:q,time:j}):{},ee=a(E),te="none"===k,ie=t("div",{className:"neba-mockup-screen relative flex flex-col overflow-hidden",style:{width:D.width,height:D.height,borderRadius:A.screenRadius,background:M??"var(--neba-surface)",boxShadow:te?void 0:"inset 0 0 0 1px var(--n-shell-shade)"},children:[_.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[_.start?.node,e("div",{className:"min-w-0 flex-1 "+($?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"neba-screen"},children:S})]}),_.bottom?.node,e(o,{notch:U,screen:D,landscape:q})]}),re=["neba-mockup relative block",ee.className,O??""].filter(Boolean).join(" ");return n({render:L,ref:Z,props:{className:re,style:{...m(H,C),...h[R],...ee.style,width:W??(void 0===B?"100%":"auto"),height:B??"auto",aspectRatio:`${G.width} / ${G.height}`,filter:d[C],...P},children:t("div",{className:"absolute top-1/2 left-1/2 flex flex-col items-center",style:{width:G.width,height:G.height,transform:`translate(-50%, -50%) scale(${X??1})`,visibility:null===X?"hidden":void 0},children:[e("div",{className:te?"":f,style:{width:J.width,height:J.height,borderRadius:A.frameRadius,paddingBlock:`${A.bezel.top}px ${A.bezel.bottom}px`,paddingInline:A.bezel.x},children:ie}),K?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:K.neckWidth,height:K.neckHeight,background:"var(--n-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:f,style:{width:K.footWidth,height:K.footHeight,borderRadius:K.footHeight/2}})]}):null,Q?e("div",{"aria-hidden":"true",className:`relative ${f}`,style:{width:Q.width,height:Q.height,borderRadius:`0 0 ${Math.round(.55*Q.height)}px ${Math.round(.55*Q.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute top-0 left-1/2",style:{width:Q.lipWidth,height:Math.round(.34*Q.height),marginLeft:-Q.lipWidth/2,borderRadius:`0 0 ${Math.round(.2*Q.height)}px ${Math.round(.2*Q.height)}px`,background:"var(--n-shell-shade)"}})}):null]}),...F}})});

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

@@ -0,0 +1,2 @@
+export { Mockup } from './Mockup';
+export type { MockupProps, NebaMockupBezel, NebaMockupDevice, NebaMockupFinish, NebaMockupHardware, NebaMockupNotch, NebaMockupOrientation, NebaMockupOs, NebaMockupResolution } from './Mockup';

package/dist/components/mockup/index.js

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

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

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

package/dist/components/popover/Popover.js

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

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

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

package/dist/components/popover/index.js

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

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

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

package/dist/components/skeleton/Skeleton.js

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

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

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

package/dist/components/skeleton/index.js

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

package/dist/components/typography/Typography.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaColor } from '../../types';
+import type { NebaColor, NebaTransition } from '../../types';
 /**
  * What a piece of text *is*, which decides both its type scale and the element
  * it renders as.
@@ -19,6 +19,12 @@ export interface TypographyProps extends Omit<React.ComponentPropsWithoutRef<'p'
      * @default 'body'
      */
     level?: TypographyLevel;
+    /**
+     * 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;
     /**
      * Semantic colour role. Unlike every other component this has **no default**:
      * text inherits the page's own colour unless a role is asked for, because the

package/dist/components/typography/Typography.js

@@ -1 +1 @@
-import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const r={h1:"text-[1.875rem]/[2.25rem] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.875rem] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.625rem] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.5rem]",h5:"text-[0.9375rem]/[1.375rem]",h6:"text-[0.8125rem]/[1.25rem]",lead:"text-[1.0625rem]/[1.75rem]",body:"text-[0.8125rem]/[1.375rem]",caption:"text-[0.75rem]/[1.125rem]",overline:"text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase"},m={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},n={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},a=new Set(["caption","overline"]),l={h1:"mb-4",h2:"mb-3.5",h3:"mb-3",h4:"mb-2.5",h5:"mb-2",h6:"mb-2",lead:"mb-4",body:"mb-3",caption:"mb-2",overline:"mb-2"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"},c={1:"truncate",2:"line-clamp-2",3:"line-clamp-3",4:"line-clamp-4",5:"line-clamp-5",6:"line-clamp-6"};export const Typography=e.forwardRef(function({level:h="body",color:d,weight:s,align:b,lines:p,gutter:x=!1,render:u,className:f,style:g,children:y,...v},k){const j=[r[h],o[s??m[h]],b?i[b]:"",p?c[p]??"line-clamp-6":"",x?l[h]:"",d?"text-(--n-accent)":a.has(h)?"text-(--neba-muted-fg)":"text-(--neba-fg)",f??""].filter(Boolean).join(" ");return t({render:u??e.createElement(n[h]),ref:k,props:{className:j,style:d?{"--n-accent":`var(--neba-${d}-accent)`,...g}:g,children:y,...v}})});
+import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";import{transitionProps as r}from"../../internal/animate";const m={h1:"text-[1.875rem]/[2.25rem] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.875rem] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.625rem] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.5rem]",h5:"text-[0.9375rem]/[1.375rem]",h6:"text-[0.8125rem]/[1.25rem]",lead:"text-[1.0625rem]/[1.75rem]",body:"text-[0.8125rem]/[1.375rem]",caption:"text-[0.75rem]/[1.125rem]",overline:"text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase"},n={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},a={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},l=new Set(["caption","overline"]),o={h1:"mb-4",h2:"mb-3.5",h3:"mb-3",h4:"mb-2.5",h5:"mb-2",h6:"mb-2",lead:"mb-4",body:"mb-3",caption:"mb-2",overline:"mb-2"},i={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},c={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"},h={1:"truncate",2:"line-clamp-2",3:"line-clamp-3",4:"line-clamp-4",5:"line-clamp-5",6:"line-clamp-6"};export const Typography=e.forwardRef(function({level:s="body",color:d,weight:b,align:p,lines:x,gutter:u=!1,transition:f,render:g,className:y,style:v,children:k,...j},w){const N=r(f),B=[m[s],i[b??n[s]],p?c[p]:"",x?h[x]??"line-clamp-6":"",u?o[s]:"",d?"text-(--n-accent)":l.has(s)?"text-(--neba-muted-fg)":"text-(--neba-fg)",N.className,y??""].filter(Boolean).join(" ");return t({render:g??e.createElement(a[s]),ref:w,props:{className:B,style:d?{"--n-accent":`var(--neba-${d}-accent)`,...N.style,...v}:{...N.style,...v},children:k,...j}})});

package/dist/index.d.ts

@@ -1,6 +1,18 @@
 export * from './types';
 export * from './components/accordion';
 export * from './components/alert';
+export * from './components/animate-appear';
+export * from './components/animate-blink';
+export * from './components/animate-fade';
+export * from './components/animate-grow';
+export * from './components/animate-headline';
+export * from './components/animate-lighting';
+export * from './components/animate-marquee';
+export * from './components/animate-rotate';
+export * from './components/animate-slide';
+export * from './components/animate-typing';
+export * from './components/animate-zoom';
+export * from './components/aspect-ratio';
 export * from './components/avatar';
 export * from './components/badge';
 export * from './components/blockquote';
@@ -13,13 +25,17 @@ export * from './components/carousel';
 export * from './components/chat-bubble';
 export * from './components/checkbox';
 export * from './components/chip';
+export * from './components/color-picker';
 export * from './components/combobox';
 export * from './components/container';
+export * from './components/data-table';
 export * from './components/date-picker';
 export * from './components/date-range-picker';
 export * from './components/date-time-picker';
 export * from './components/dialog';
 export * from './components/divider';
+export * from './components/drawer';
+export * from './components/empty';
 export * from './components/file-picker';
 export * from './components/grid';
 export * from './components/grid-container';
@@ -28,12 +44,14 @@ export * from './components/icon';
 export * from './components/icon-button';
 export * from './components/list';
 export * from './components/menu';
+export * from './components/mockup';
 export * from './components/number-field';
 export * from './components/otp-field';
 export * from './components/overlay';
 export * from './components/pagination';
 export * from './components/panes';
 export * from './components/pill';
+export * from './components/popover';
 export * from './components/progress-box';
 export * from './components/progress-circular';
 export * from './components/progress-linear';
@@ -41,6 +59,7 @@ export * from './components/radio-group';
 export * from './components/segmented-button';
 export * from './components/select';
 export * from './components/shortcut';
+export * from './components/skeleton';
 export * from './components/slider';
 export * from './components/spoiler';
 export * from './components/statistic';

package/dist/index.js

@@ -1 +1 @@
-export*from"./types";export*from"./components/accordion";export*from"./components/alert";export*from"./components/avatar";export*from"./components/badge";export*from"./components/blockquote";export*from"./components/box";export*from"./components/breadcrumb";export*from"./components/button";export*from"./components/button-group";export*from"./components/card";export*from"./components/carousel";export*from"./components/chat-bubble";export*from"./components/checkbox";export*from"./components/chip";export*from"./components/combobox";export*from"./components/container";export*from"./components/date-picker";export*from"./components/date-range-picker";export*from"./components/date-time-picker";export*from"./components/dialog";export*from"./components/divider";export*from"./components/file-picker";export*from"./components/grid";export*from"./components/grid-container";export*from"./components/highlight";export*from"./components/icon";export*from"./components/icon-button";export*from"./components/list";export*from"./components/menu";export*from"./components/number-field";export*from"./components/otp-field";export*from"./components/overlay";export*from"./components/pagination";export*from"./components/panes";export*from"./components/pill";export*from"./components/progress-box";export*from"./components/progress-circular";export*from"./components/progress-linear";export*from"./components/radio-group";export*from"./components/segmented-button";export*from"./components/select";export*from"./components/shortcut";export*from"./components/slider";export*from"./components/spoiler";export*from"./components/statistic";export*from"./components/switch";export*from"./components/table";export*from"./components/tabs";export*from"./components/text-field";export*from"./components/text-link";export*from"./components/time-picker";export*from"./components/timeline";export*from"./components/toast";export*from"./components/toolbar";export*from"./components/tooltip";export*from"./components/tree-view";export*from"./components/typography";
+export*from"./types";export*from"./components/accordion";export*from"./components/alert";export*from"./components/animate-appear";export*from"./components/animate-blink";export*from"./components/animate-fade";export*from"./components/animate-grow";export*from"./components/animate-headline";export*from"./components/animate-lighting";export*from"./components/animate-marquee";export*from"./components/animate-rotate";export*from"./components/animate-slide";export*from"./components/animate-typing";export*from"./components/animate-zoom";export*from"./components/aspect-ratio";export*from"./components/avatar";export*from"./components/badge";export*from"./components/blockquote";export*from"./components/box";export*from"./components/breadcrumb";export*from"./components/button";export*from"./components/button-group";export*from"./components/card";export*from"./components/carousel";export*from"./components/chat-bubble";export*from"./components/checkbox";export*from"./components/chip";export*from"./components/color-picker";export*from"./components/combobox";export*from"./components/container";export*from"./components/data-table";export*from"./components/date-picker";export*from"./components/date-range-picker";export*from"./components/date-time-picker";export*from"./components/dialog";export*from"./components/divider";export*from"./components/drawer";export*from"./components/empty";export*from"./components/file-picker";export*from"./components/grid";export*from"./components/grid-container";export*from"./components/highlight";export*from"./components/icon";export*from"./components/icon-button";export*from"./components/list";export*from"./components/menu";export*from"./components/mockup";export*from"./components/number-field";export*from"./components/otp-field";export*from"./components/overlay";export*from"./components/pagination";export*from"./components/panes";export*from"./components/pill";export*from"./components/popover";export*from"./components/progress-box";export*from"./components/progress-circular";export*from"./components/progress-linear";export*from"./components/radio-group";export*from"./components/segmented-button";export*from"./components/select";export*from"./components/shortcut";export*from"./components/skeleton";export*from"./components/slider";export*from"./components/spoiler";export*from"./components/statistic";export*from"./components/switch";export*from"./components/table";export*from"./components/tabs";export*from"./components/text-field";export*from"./components/text-link";export*from"./components/time-picker";export*from"./components/timeline";export*from"./components/toast";export*from"./components/toolbar";export*from"./components/tooltip";export*from"./components/tree-view";export*from"./components/typography";