neba 1.2.0 → 1.3.0

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
+import type { NebaSide, NebaStyleProps } from '../../types';
+/**
+ * How the panel relates to the page.
+ *
+ * - `overlay` — it is opened, it floats over the page on a scrim, it holds the
+ *   focus, and it is dismissed. The navigation drawer behind a hamburger, the
+ *   filter panel beside a table.
+ * - `inline` — it is part of the layout and the page is laid out around it. No
+ *   scrim, no portal, no focus trap, nothing to dismiss. The sidebar that is
+ *   simply there.
+ *
+ * A separate axis from `variant`, which already means the weight of a surface
+ * across the whole library and would be a second spelling of nothing.
+ */
+export type NebaDrawerMode = 'overlay' | 'inline';
+/**
+ * A drawer takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant`, for Dialog's reason: the three weights answer "how
+ * much does this surface assert itself against the page", and a panel that has
+ * taken an edge of the window has answered it. There is no `elevation` either —
+ * an `overlay` drawer floats and carries a shadow at level 3, an `inline` one is
+ * part of the layout and carries none, and neither is a decision worth offering.
+ */
+export interface DrawerProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'> {
+    /**
+     * Which edge the panel is attached to. Physical rather than logical, the way
+     * `NebaSide` is everywhere: a drawer along the top of the window is along the
+     * top in every writing direction.
+     * @default 'left'
+     */
+    side?: NebaSide;
+    /** @default 'overlay' */
+    mode?: NebaDrawerMode;
+    /** The drawer is shown. Use with `onOpenChange` for a controlled drawer. */
+    open?: boolean;
+    /**
+     * Whether the drawer starts open, for an uncontrolled one.
+     *
+     * Defaults to `false` in `overlay` mode and `true` in `inline` mode, because
+     * a fixed sidebar that had to be opened before it appeared would not be a
+     * fixed sidebar.
+     */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The element that opens the drawer, wired up by Base UI.
+     *
+     * `overlay` only. An `inline` drawer is not opened — it is in the layout —
+     * so a trigger there would have nothing to do and is not rendered.
+     */
+    trigger?: React.ReactElement;
+    /** The heading. Rendered as the element that names the drawer. */
+    title?: React.ReactNode;
+    /** A line under the title, and the drawer's accessible description. */
+    description?: React.ReactNode;
+    /**
+     * The bottom row, held against the foot of the panel while the body scrolls.
+     * Laid out end-aligned, so a pair of buttons needs no wrapper of its own —
+     * and `DrawerClose` is what makes one of them dismiss.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Draws a hairline between the header, the body and the actions instead of
+     * separating them with space. Worth turning on the moment the body scrolls:
+     * the lines are what say the header stayed put.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Shows the × in the corner. On in `overlay` mode, where the panel has taken
+     * the page and the way out should not have to be remembered; off in `inline`
+     * mode, where a × that closes a fixed sidebar with nothing to reopen it is a
+     * one-way door.
+     */
+    showClose?: boolean;
+    /** Accessible name of the × button. */
+    closeLabel?: string;
+    /**
+     * How far the panel reaches in from its edge: a **width** for `left` and
+     * `right`, a **height** for `top` and `bottom`. Numbers are pixels.
+     *
+     * Left alone, a side panel takes the width its `size` implies and a top or
+     * bottom panel is as tall as what is in it, up to 85% of the window.
+     */
+    extent?: number | string;
+    /**
+     * Rounds the two corners on the edge that faces the page — the top and bottom
+     * of a side panel, the inner pair of a top or bottom one. The corners against
+     * the window edge are always square, because a corner cut off something that
+     * has no visible end is a corner cut off nothing.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Whether the page behind is taken away. `'trap-focus'` keeps the page
+     * scrollable and clickable while still holding focus inside. `overlay` only.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether pressing Escape or clicking the scrim closes the drawer. Turn it off
+     * for the drawer that has to be answered — and then give it actions that
+     * answer it, because there will be no other way out. `overlay` only.
+     * @default true
+     */
+    dismissible?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export type DrawerCloseProps = React.ComponentPropsWithoutRef<typeof BaseUIDialog.Close>;
+/**
+ * Closes the drawer it is inside.
+ *
+ * Exported for `DialogClose`'s reason: an uncontrolled drawer has no `setOpen`
+ * for its Cancel button to call. It is an `overlay` drawer's button — an
+ * `inline` drawer is not a Base UI dialog and has nothing for this to talk to.
+ *
+ * `render` is Base UI's own escape hatch, so a real Neba button dismisses:
+ * `<DrawerClose render={<Button variant="text">Cancel</Button>} />`.
+ */
+export declare const DrawerClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A panel attached to one edge of the window.
+ *
+ * Two things in one component, because they are the same panel: `overlay` is the
+ * drawer you open — a scrim, a focus trap, Escape — and `inline` is the drawer
+ * that is simply part of the page. Everything else about them is identical,
+ * which is exactly why they should not be two components a caller has to switch
+ * between when a sidebar becomes a hamburger at a breakpoint.
+ *
+ * The sections are props rather than compound sub-components, as on Card and
+ * Dialog: the arrangement is fixed — heading, description, body, actions — and
+ * what a caller wants to decide is what goes in each slot. The body is the only
+ * part that scrolls, so the heading and the actions stay put.
+ *
+ * In `overlay` mode Base UI owns everything hard about it: the focus trap, the
+ * scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
+ * focus to the trigger, and the inert page behind.
+ */
+export declare function Drawer({ side, mode, size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, extent, rounded, modal, dismissible, className, style, children }: DrawerProps): React.JSX.Element | null;

package/dist/components/drawer/Drawer.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r,Fragment as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as o}from"../box/Box";import{CloseIcon as s}from"../../internal/icons";import{hasContent as i,metaTextClasses as d,sheetBodyClasses as t,sheetHeaderGapClasses as u,sheetSectionGapClasses as b,sheetTitleClasses as m,surfaceClasses as c,surfaceSlots as f}from"../../internal/styles";const x={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},p={left:{xs:"rounded-r-(--neba-radius-xs)",sm:"rounded-r-(--neba-radius-sm)",md:"rounded-r-(--neba-radius-md)",lg:"rounded-r-(--neba-radius-lg)",xl:"rounded-r-(--neba-radius-xl)"},right:{xs:"rounded-l-(--neba-radius-xs)",sm:"rounded-l-(--neba-radius-sm)",md:"rounded-l-(--neba-radius-md)",lg:"rounded-l-(--neba-radius-lg)",xl:"rounded-l-(--neba-radius-xl)"},top:{xs:"rounded-b-(--neba-radius-xs)",sm:"rounded-b-(--neba-radius-sm)",md:"rounded-b-(--neba-radius-md)",lg:"rounded-b-(--neba-radius-lg)",xl:"rounded-b-(--neba-radius-xl)"},bottom:{xs:"rounded-t-(--neba-radius-xs)",sm:"rounded-t-(--neba-radius-sm)",md:"rounded-t-(--neba-radius-md)",lg:"rounded-t-(--neba-radius-lg)",xl:"rounded-t-(--neba-radius-xl)"}},g={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},h={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},v=[c,"relative flex flex-col overflow-hidden","text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[outline:none]"].join(" "),y=["[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]",y].join(" "),j="border-t [border-color:var(--n-line)]",N=["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(" ");export const DrawerClose=l.Close;export function Drawer({side:c="left",mode:$="overlay",size:_="md",color:k="primary",density:C="default",open:z,defaultOpen:B,onOpenChange:D,trigger:O,title:P,description:T,actions:F,dividers:L=!1,showClose:R,closeLabel:V="Close",extent:q,rounded:A=!0,modal:E=!0,dismissible:G=!0,className:H,style:I,children:J}){const K="overlay"===$,M="left"===c||"right"===c,Q=R??K,S=n[C][_],U=o[C][_],W=L?`${S} ${U}`:S,X=i(P)||i(T),Y=i(F),Z=void 0===q?null:{[M?"width":"height"]:"number"==typeof q?`${q}px`:q},ee=[v,t[_],g[c],A?p[c][_]:"",K?"[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]":"[box-shadow:var(--neba-plate-glass)]",K?y:"",M?`h-full max-w-full ${void 0===q?x[_]:""}`:"w-full "+(void 0===q?"max-h-[85%]":""),L?"":`${U} ${b[_]}`,H??""].filter(Boolean).join(" "),re=K?l.Title:"h2",ae=K?l.Description:"p",le=r(a,{children:[X||Q?r("div",{className:`flex shrink-0 items-start gap-3 ${W}`,children:[r("div",{className:`flex min-w-0 flex-1 flex-col ${u[_]}`,children:[i(P)?e(re,{className:`m-0 font-semibold ${m[_]}`,children:P}):null,i(T)?e(ae,{className:`m-0 text-(--neba-muted-fg) ${d[_]}`,children:T}):null]}),Q?K?e(l.Close,{"aria-label":V,className:N,children:e(s,{})}):e("button",{type:"button","aria-label":V,className:N,onClick:()=>D?.(!1),children:e(s,{})}):null]}):null,i(J)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",W,L&&(X||Q)?j:"",L?"":"py-1 -my-1"].filter(Boolean).join(" "),children:J}):null,Y?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",W,L?j:""].filter(Boolean).join(" "),children:F}):null]});return K?r(l.Root,{open:z,defaultOpen:B,modal:E,disablePointerDismissal:!G,onOpenChange:(e,r)=>{G||e||"escape-key"!==r.reason?D?.(e):r.cancel()},children:[O?e(l.Trigger,{render:O}):null,r(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${w}`}),e(l.Viewport,{className:`neba-portal fixed inset-0 z-50 flex ${h[c]}`,children:e(l.Popup,{className:ee,style:{...f(k,3),...Z,...I},children:le})})]})]}):z??B??1?e("div",{className:ee,style:{...f(k,0),...Z,...I},children:le}):null}

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

@@ -0,0 +1,2 @@
+export { Drawer, DrawerClose } from './Drawer';
+export type { DrawerCloseProps, DrawerProps, NebaDrawerMode } from './Drawer';

package/dist/components/drawer/index.js

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

package/dist/components/icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaColor, NebaSize } from '../../types';
+import type { NebaColor, NebaSize, NebaTransition } from '../../types';
 export interface IconProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
     /**
      * The glyph. An `<svg>` element, an `<img>`, a component from an icon set, or
@@ -13,6 +13,13 @@ export interface IconProps extends Omit<React.ComponentPropsWithoutRef<'span'>,
      * *sizes*, not content the Icon merely wraps.
      */
     icon: React.ReactNode;
+    /**
+     * An entrance animation, run once on mount: `transition="fade"`, or an object
+     * for the details. `transition="rotate"` with `repeat="infinite"` is the one
+     * spin the design language allows on a glyph. For a trigger or a replay, wrap
+     * it in an `Animate*` component instead.
+     */
+    transition?: NebaTransition;
     /**
      * The box the glyph is drawn in: 14, 16, 20, 24 and 28px. Its own ladder
      * rather than the control heights, because an icon is not a control.

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/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,6 +25,7 @@ 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/date-picker';
@@ -20,6 +33,7 @@ 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/file-picker';
 export * from './components/grid';
 export * from './components/grid-container';
@@ -34,6 +48,7 @@ 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 +56,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/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/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/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";