neba 0.0.1 → 1.0.0

package/dist/components/file-picker/FilePicker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{CloseIcon as t}from"../../internal/icons";import{controlTextLeadingClasses as a,disabledClasses as l,gapClasses as o,hasContent as i,iconClasses as s,metaTextClasses as c,radiusClasses as d,readOnlyFilterClasses as u,sheetTitleClasses as f,stackGapClasses as p,surfaceClasses as m,surfaceSlots as h,transitionClasses as b}from"../../internal/styles";const v={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},x={solid:[m,"border-2 border-dashed text-(--neba-fg) bg-(--n-panel-hover)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),outline:[m,"border-2 border-dashed text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"border-2 border-dashed text-(--neba-fg) bg-transparent [border-color:var(--n-line)]"},g={solid:"hover:bg-(--n-panel-press) hover:[border-color:var(--n-line-hover)]",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]",text:"hover:bg-(--n-soft) hover:[border-color:var(--n-line-hover)]"};function y(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let n=e/1e3,t=0;for(;n>=1e3&&t<r.length-1;)n/=1e3,t+=1;return`${n<10?n.toFixed(1):Math.round(n)} ${r[t]}`}function k(e,r){const n=e.name.toLowerCase(),t=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?n.endsWith(e):e.endsWith("/*")?t.startsWith(`${e.slice(0,-1)}`):t===e)}export const FilePicker=n.forwardRef(function({variant:m="outline",size:N="md",color:$="primary",density:j="default",elevation:w=0,accept:z,multiple:C=!1,maxSize:_,maxFiles:L,value:B,defaultValue:D,onFilesChange:I,onReject:F,label:M,description:W,error:S,invalid:R,title:T,hint:V,icon:E,showList:O=!0,removeLabel:q=e=>`Remove ${e}`,fullWidth:A=!0,disabled:P=!1,readOnly:G=!1,required:H=!1,name:Y,id:J,className:K,style:Q},U){const X=n.useRef(null);n.useImperativeHandle(U,()=>X.current);const[Z,ee]=n.useState(()=>[...D??[]]),re=B?[...B]:Z,ne=n.useRef(0),[te,ae]=n.useState(!1),le=i(S),oe=R??le,ie=oe?"danger":$,se=P||G,ce=n.useId(),de=n.useCallback(e=>{B||ee(e),I?.(e)},[I,B]),ue=n.useCallback(e=>{const r=[],n=[],t=C?L??Number.POSITIVE_INFINITY:1,a=C?re.length:0;for(const l of e)z&&!k(l,z)?n.push({file:l,reason:"type"}):void 0!==_&&l.size>_?n.push({file:l,reason:"size"}):a+r.length>=t?n.push({file:l,reason:"count"}):r.push(l);return{kept:r,rejections:n}},[z,re.length,L,_,C]),fe=n.useCallback(e=>{const{kept:r,rejections:n}=ue(e);n.length>0&&F?.(n),r.length>0&&de(C?[...re,...r]:r)},[ue,de,re,C,F]),pe=["flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",v[j][N],d[N],o[N],b,s,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",P?`${l[m]} border-2 border-dashed`:G?`${x[m]} ${u} cursor-default`:x[m],se?"":g[m],te&&!se?"bg-(--n-soft-press) [border-color:var(--n-ring)]":""].filter(Boolean).join(" ");return r("div",{className:["flex-col align-top",p[N],A?"flex w-full":"inline-flex",K??""].filter(Boolean).join(" "),style:{...h(ie,w),...Q},children:[i(M)?e("span",{className:[c[N],"font-medium",P?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:M}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{se||(e.preventDefault(),ne.current+=1,ae(!0))},onDragOver:e=>{se||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{se||(ne.current=Math.max(0,ne.current-1),0===ne.current&&ae(!1))},onDrop:e=>{se||(e.preventDefault(),ne.current=0,ae(!1),fe(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:J,disabled:P,"aria-describedby":i(W)||le?ce:void 0,"aria-invalid":oe||void 0,className:pe,onClick:()=>{se||X.current&&(X.current.value="",X.current.click())},children:[void 0===E?e("span",{className:"flex items-center text-(--n-accent) [&_svg]:size-[1.8em]",children:e(y,{})}):i(E)?e("span",{className:"flex items-center text-(--n-accent) [&_svg]:size-[1.8em]",children:E}):null,e("span",{className:`font-medium ${f[N]}`,children:T??"Drop files here, or click to browse"}),i(V)?e("span",{className:`text-(--neba-muted-fg) ${c[N]}`,children:V}):null]}),e("input",{ref:X,type:"file",name:Y,accept:z,multiple:C,required:H&&0===re.length,disabled:se,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>fe(Array.from(e.target.files??[]))})]}),O&&re.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${p[N]} m-0 list-none p-0`,children:re.map((n,l)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",d.xs,a[N],"bg-(--n-soft) text-(--neba-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:n.name}),e("span",{className:`shrink-0 text-(--neba-muted-fg) tabular-nums ${c[N]}`,children:formatFileSize(n.size)}),se?null:e("button",{type:"button","aria-label":q(n.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--neba-muted-fg) opacity-70","[transition:opacity_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","[&_svg]:size-[0.9em]","hover:text-(--neba-fg) hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"].join(" "),onClick:()=>de(re.filter((e,r)=>r!==l)),children:e(t,{})})]},`${n.name}-${n.size}-${n.lastModified}-${l}`))}):null,i(W)&&!le?e("span",{id:ce,className:`${c[N]} text-(--neba-muted-fg)`,children:W}):null,le?e("span",{id:ce,className:`${c[N]} text-(--n-accent)`,children:S}):null]})});

package/dist/components/file-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { FilePicker, formatFileSize } from './FilePicker';
+export type { FilePickerProps, FileRejection, FileRejectionReason } from './FilePicker';

package/dist/components/file-picker/index.js

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

package/dist/components/list/List.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+export interface ListProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'ul'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * Separates the rows with a hairline instead of with space.
+     *
+     * It changes more than it sounds like: with dividers the rules have to reach
+     * both edges of the sheet, so the list gives up its inner padding and the rows
+     * give up their rounded corners. A row cannot be a floating tile and a ruled
+     * line at the same time.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Renders something other than a `<ul>` — `render={<ol />}` for a list where
+     * the order is the point. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+export interface ListItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
+    /**
+     * Passing it is what turns the row into a real `<button>`. It lands on that
+     * button rather than on the `<li>`, which is why the type is loosened from
+     * the list item the shell actually is.
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Content before the label — an icon, an avatar, a status dot. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, inside the pressable area. */
+    endIcon?: React.ReactNode;
+    /** A second line under the label, one step down the type scale and muted. */
+    description?: React.ReactNode;
+    /**
+     * A control pinned to the end of the row — a switch, a menu button.
+     *
+     * Deliberately outside the pressable area: a row that both navigates and
+     * holds a toggle has two things to press, and nesting one button inside
+     * another is markup the browser rewrites on parse.
+     */
+    action?: React.ReactNode;
+    /** Renders the row as a link. Mutually exclusive with `onClick` in practice. */
+    href?: string;
+    /** Marks the row as the chosen one — the open page, the current filter. */
+    selected?: boolean;
+    /** Unavailable. Drops the colour family for neutral grey, as everywhere else. */
+    disabled?: boolean;
+    /** The label. */
+    children?: React.ReactNode;
+}
+/**
+ * A stack of rows.
+ *
+ * The list is a sheet and the rows are what is on it, which is the whole reason
+ * the two are separate components: `size` and `density` are properties of the
+ * stack, not of any one line in it, and a context is what carries them down.
+ *
+ * There is no Base UI primitive under this on purpose. A list is not a
+ * composite widget — it has no roving focus, no selection model, no keyboard
+ * contract of its own. Reaching for a menu or a listbox primitive to get one
+ * would hand every consumer's plain list of links the semantics of a menu,
+ * which is the most common way a component library breaks a screen reader.
+ */
+export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLUListElement>>;
+/**
+ * One row.
+ *
+ * The shell is always an `<li>`. What changes is what is inside it: a plain run
+ * of content, or — when `onClick` or `href` is given — a real `<button>` or
+ * `<a>` wrapping that content, with `action` sitting outside it as a separate
+ * control. This is the same shape Chip uses, for the same two reasons: a
+ * `<span>` carrying a click handler is invisible to a keyboard, and a
+ * `<button>` inside a `<button>` is markup Chrome silently un-nests.
+ */
+export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/list/List.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as s}from"../box/Box";import{focusRingClasses as a,gapClasses as i,hasContent as o,iconClasses as d,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as f,surfaceClasses as x,surfaceSlots as p,transitionClasses as u}from"../../internal/styles";const h=t.createContext({size:"md",density:"default",dividers:!1}),b={solid:[x,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[x,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},v={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},g={xs:m.xs,sm:m.xs,md:m.sm,lg:m.sm,xl:m.md};export const List=t.forwardRef(function({variant:n="outline",size:r="md",color:s="primary",density:a="default",elevation:i=0,dividers:o=!1,render:d,className:c,style:f,children:x,...v},g){const y=t.useMemo(()=>({size:r,density:a,dividers:o}),[r,a,o]),N=["flex flex-col",m[r],b[n],u,o?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--n-line)]":"p-1",c??""].filter(Boolean).join(" "),w=l({render:d,ref:g,props:{role:"list",className:N,style:{...p(s,i),...f},children:x,...v}});return e(h.Provider,{value:y,children:w})});export const ListItem=t.forwardRef(function({startIcon:l,endIcon:m,description:x,action:p,href:b,selected:y=!1,disabled:N=!1,className:w,children:j,onClick:k,...B},C){const{size:z,density:I,dividers:$}=t.useContext(h),L=Boolean(k||b)&&!N,R=s[I][z],F=["flex min-w-0 flex-1 items-center text-start",R,v[I][z],i[z],f[z],u,d,$?"":g[z],N?"cursor-not-allowed text-(--neba-disabled-fg)":y?"bg-(--n-soft-press) font-medium text-(--n-accent)":"",L?`cursor-pointer ${a}`:"",L&&!y?"hover:bg-(--n-soft)":"",L&&y?"hover:bg-(--n-soft-press)":""].filter(Boolean).join(" "),M=n(r,{children:[o(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:l}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[o(j)?e("span",{className:"truncate",children:j}):null,o(x)?e("span",{className:`truncate text-(--neba-muted-fg) ${c[z]}`,children:x}):null]}),o(m)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:m}):null]});return n("li",{ref:C,className:["flex w-full items-center",w??""].filter(Boolean).join(" "),...B,children:[L&&b?e("a",{href:b,className:F,"aria-current":y?"page":void 0,onClick:k,children:M}):L?e("button",{type:"button",className:F,"aria-current":!!y||void 0,onClick:k,children:M}):e("div",{className:F,"aria-disabled":N||void 0,children:M}),o(p)?e("div",{className:`flex shrink-0 items-center ${R}`,children:p}):null]})});

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

@@ -0,0 +1,2 @@
+export { List, ListItem } from './List';
+export type { ListItemProps, ListProps } from './List';

package/dist/components/list/index.js

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

package/dist/components/menu/Menu.d.ts

@@ -0,0 +1,216 @@
+import * as React from 'react';
+import type { NebaAlign, NebaColor, NebaSide, NebaStyleProps } from '../../types';
+/**
+ * A menu takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant`, for the reason Dialog has none: the three weights
+ * answer "how much does this surface assert itself against the page", and a
+ * popup that has taken the pointer has already answered it. There is no
+ * `elevation` either — a menu genuinely floats, which is the one case elevation
+ * exists for, so it is fixed at 3.
+ */
+interface MenuSurfaceProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'> {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MenuProps extends MenuSurfaceProps {
+    /**
+     * The element that opens the menu, wired up by Base UI. Optional — a
+     * controlled menu opened from elsewhere needs no trigger of its own.
+     */
+    trigger?: React.ReactElement;
+    /** Whether the menu is open. Use with `onOpenChange` for a controlled menu. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which edge of the trigger it hangs off. @default 'bottom' */
+    side?: NebaSide;
+    /** Where it sits along that edge. @default 'start' */
+    align?: NebaAlign;
+    /** Distance from the trigger, in pixels. @default 6 */
+    sideOffset?: number;
+    /**
+     * Whether the page behind is taken away while the menu is open.
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Opens on hover as well as on click. For a menu bar, where crossing the row
+     * with an open menu should walk through the others rather than close them.
+     * @default false
+     */
+    openOnHover?: boolean;
+    /**
+     * Whether the arrow keys wrap from the last item back to the first.
+     * @default true
+     */
+    loopFocus?: boolean;
+    /** Unavailable. The trigger stops opening anything. */
+    disabled?: boolean;
+    /** The rows. */
+    children?: React.ReactNode;
+}
+export interface ContextMenuProps extends MenuSurfaceProps {
+    /** The rows, exactly as they are written inside a `Menu`. */
+    content: React.ReactNode;
+    /**
+     * The area that answers a right-click or a long press. Rendered inside a
+     * `<div>` of Base UI's, which is what listens for the gesture.
+     */
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** @default true */
+    loopFocus?: boolean;
+    disabled?: boolean;
+}
+export interface MenuItemProps {
+    /** What the row does. Not given, and not a link, the row is a label. */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Renders the row as a real `<a>`. A menu of links has to be links. */
+    href?: string;
+    /** Where the link opens — `_blank` and the rest. Ignored without `href`. */
+    target?: string;
+    /** Content before the label — an icon, a swatch, a check. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, before any `shortcut`. */
+    endIcon?: React.ReactNode;
+    /**
+     * The keystroke that does the same thing, set at the end of the row and
+     * muted. Text only — the row does not bind it, the application does.
+     */
+    shortcut?: React.ReactNode;
+    /** A second line under the label, one step down the type scale and muted. */
+    description?: React.ReactNode;
+    /**
+     * Re-points the row's colour family — `danger` for the one that deletes.
+     * Defaults to the menu's own.
+     */
+    color?: NebaColor;
+    /**
+     * Whether picking the row closes the menu.
+     * @default true
+     */
+    closeOnClick?: boolean;
+    /** Unavailable. Still listed, and still found by typeahead. */
+    disabled?: boolean;
+    /** What typeahead matches against, when the label is not a plain string. */
+    label?: string;
+    /** The label. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MenuSubmenuProps {
+    /** The label on the row that opens it. */
+    label?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    disabled?: boolean;
+    /** Which edge of the parent row it opens against. @default 'right' */
+    side?: NebaSide;
+    /** Distance from the parent menu, in pixels. @default 4 */
+    sideOffset?: number;
+    /** The nested rows. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MenuGroupProps {
+    /** The heading over the group. Wired to it by Base UI. */
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface MenuCheckboxItemProps extends Omit<MenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether ticking the row closes the menu. `false` here rather than the `true`
+     * a plain item takes: a list of things to tick is a list you tick more than
+     * one of.
+     * @default false
+     */
+    closeOnClick?: boolean;
+}
+export interface MenuRadioGroupProps {
+    value?: string | number;
+    defaultValue?: string | number;
+    onValueChange?: (value: string | number) => void;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface MenuRadioItemProps extends Omit<MenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+    /** What this row sets the group to. */
+    value: string | number;
+    /** @default false */
+    closeOnClick?: boolean;
+}
+export type MenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
+/**
+ * One row of a menu.
+ *
+ * Renders a real `<a>` when it is given an `href` and Base UI's own item
+ * otherwise — the same split ListItem makes, for the same reason. A menu of
+ * links that are not links cannot be opened in a new tab, cannot be copied, and
+ * tells a screen reader the wrong thing about every one of them.
+ */
+export declare function MenuItem({ onClick, href, target, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuItemProps): React.JSX.Element;
+/** A row that ticks. The tick lands in the same slot a `startIcon` would. */
+export declare function MenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuCheckboxItemProps): React.JSX.Element;
+/** One choice out of a set. Wraps the rows that make up the set. */
+export declare function MenuRadioGroup({ value, defaultValue, onValueChange, disabled, children, className }: MenuRadioGroupProps): React.JSX.Element;
+/**
+ * A row inside a `MenuRadioGroup`.
+ *
+ * Marked with a dot rather than a tick, which is the same distinction Checkbox
+ * and Radio make everywhere else: a tick says "and", a dot says "instead of".
+ */
+export declare function MenuRadioItem({ value, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MenuRadioItemProps): React.JSX.Element;
+/** A named run of rows. The label is a heading, not a row — it cannot be picked. */
+export declare function MenuGroup({ label, children, className }: MenuGroupProps): React.JSX.Element;
+/** The hairline between two runs of rows. */
+export declare function MenuSeparator({ className, ...props }: MenuSeparatorProps): React.JSX.Element;
+/**
+ * A menu inside a menu.
+ *
+ * The row that opens it is the same row every other item is, wearing a chevron
+ * — and it opens on hover, on Enter and on the arrow key that points at it,
+ * all of which is Base UI's. What is here is the surface and the glyph.
+ *
+ * Nesting is unlimited: a `MenuSubmenu` renders its children inside a popup
+ * that is itself a menu, so a submenu of a submenu needs no different component.
+ */
+export declare function MenuSubmenu({ label, startIcon, disabled, side, sideOffset, children, className, style }: MenuSubmenuProps): React.JSX.Element;
+/**
+ * A list of actions that appears when something is pressed.
+ *
+ * Everything that makes a menu a menu rather than a floating list of divs is
+ * Base UI's: roving focus with the arrow keys, Home and End, typeahead, Escape,
+ * closing on an outside click, restoring focus to the trigger, submenus opening
+ * on hover with the safe-triangle so a diagonal reach does not close them, and
+ * the `menu` / `menuitem` roles that make any of it mean something to a screen
+ * reader. What is here is the surface, the ladders and the row layout.
+ *
+ * The rows are composed rather than passed as data — the opposite of Select,
+ * and deliberately. A select's options are values from a list a caller already
+ * has; a menu's rows are *code*, each one a different handler, a different icon,
+ * sometimes a submenu. Data would mean an `items` type with a variant for every
+ * shape a row can take, which is a component tree spelled as a discriminated
+ * union.
+ */
+export declare function Menu({ size, color, density, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: MenuProps): React.JSX.Element;
+/**
+ * The same menu, opened by a right-click or a long press instead of by a button.
+ *
+ * It takes the rows as `content` and the area as `children`, which is Tooltip's
+ * shape rather than Menu's — because here the trigger is not one element you
+ * hand over, it is a region of the page, and the region is the thing being
+ * wrapped. Base UI positions the popup at the pointer rather than against an
+ * anchor, and the long press is what makes it reachable on a touch screen at all.
+ */
+export declare function ContextMenu({ size, color, density, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: ContextMenuProps): React.JSX.Element;
+export {};

package/dist/components/menu/Menu.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n,Fragment as l}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as s}from"@base-ui/react/context-menu";import{MenuContext as o}from"../../internal/menu";import{CheckIcon as i,ChevronIcon as r,DotIcon as c}from"../../internal/icons";import{controlTextLeadingClasses as d,gapClasses as u,hasContent as m,iconClasses as p,metaTextClasses as h,radiusClasses as f,surfaceClasses as x,surfaceSlots as b,transitionClasses as g}from"../../internal/styles";const y=[x,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--n-panel-press) p-1","[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(" "),N={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},C={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};function v(e,n,l,t){return["relative flex w-full cursor-pointer items-center select-none",l?"text-(--n-accent)":"text-(--neba-fg)",N[n][e],C[e],u[e],d[e],g,p,"data-[highlighted]:bg-(--n-soft-hover)","data-[popup-open]:bg-(--n-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]",t??""].filter(Boolean).join(" ")}const k="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function O({children:l,description:t,size:a}){return m(t)?n("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:`truncate text-(--neba-muted-fg) ${h[a]}`,children:t})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function MenuItem({onClick:s,href:i,target:r,startIcon:c,endIcon:d,shortcut:u,description:p,color:f,closeOnClick:x=!0,disabled:g=!1,label:y,children:N,className:C,style:z}){const I=t.useContext(o),{size:j,density:M}=I,$=n(l,{children:[m(c)?e("span",{className:`${k} text-(--neba-muted-fg)`,children:c}):null,e(O,{description:p,size:j,children:N}),m(d)?e("span",{className:`${k} text-(--neba-muted-fg)`,children:d}):null,m(u)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${h[j]}`,children:u}):null]}),w=f?b(f,0):void 0,P=w||z?{...w,...z}:void 0;return void 0!==i?e(a.LinkItem,{href:i,target:r,label:y,closeOnClick:x,onClick:s,className:v(j,M,Boolean(f),C),style:P,children:$}):e(a.Item,{disabled:g,label:y,closeOnClick:x,onClick:s,className:v(j,M,Boolean(f),C),style:P,children:$})}export function MenuCheckboxItem({checked:l,defaultChecked:s,onCheckedChange:r,endIcon:c,shortcut:d,description:u,color:p,closeOnClick:f=!1,disabled:x=!1,label:g,children:y,className:N,style:C}){const{size:z,density:I}=t.useContext(o),j=p?b(p,0):void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:s,onCheckedChange:e=>r?.(e),disabled:x,label:g,closeOnClick:f,className:v(z,I,Boolean(p),N),style:j||C?{...j,...C}:void 0,children:[e("span",{className:`${k} text-(--n-accent)`,children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(i,{})})}),e(O,{description:u,size:z,children:y}),m(c)?e("span",{className:`${k} text-(--neba-muted-fg)`,children:c}):null,m(d)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${h[z]}`,children:d}):null]})}export function MenuRadioGroup({value:n,defaultValue:l,onValueChange:t,disabled:s=!1,children:o,className:i}){return e(a.RadioGroup,{value:n,defaultValue:l,onValueChange:e=>t?.(e),disabled:s,className:i,children:o})}export function MenuRadioItem({value:l,endIcon:s,shortcut:i,description:r,color:d,closeOnClick:u=!1,disabled:p=!1,label:f,children:x,className:g,style:y}){const{size:N,density:C}=t.useContext(o),z=d?b(d,0):void 0;return n(a.RadioItem,{value:l,disabled:p,label:f,closeOnClick:u,className:v(N,C,Boolean(d),g),style:z||y?{...z,...y}:void 0,children:[e("span",{className:`${k} text-(--n-accent)`,children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(O,{description:r,size:N,children:x}),m(s)?e("span",{className:`${k} text-(--neba-muted-fg)`,children:s}):null,m(i)?e("span",{className:`ms-2 shrink-0 text-(--neba-muted-fg) tabular-nums ${h[N]}`,children:i}):null]})}export function MenuGroup({label:l,children:s,className:i}){const{size:r,density:c}=t.useContext(o);return n(a.Group,{className:i,children:[m(l)?e(a.GroupLabel,{className:[N[c][r],h[r],"font-semibold tracking-wide text-(--neba-muted-fg) uppercase"].join(" "),children:l}):null,s]})}export function MenuSeparator({className:n,...l}){return e(a.Separator,{className:["-mx-1 my-1 h-px bg-(--n-line)",n??""].filter(Boolean).join(" "),...l})}export function MenuSubmenu({label:l,startIcon:s,disabled:i=!1,side:c="right",sideOffset:u=4,children:p,className:h,style:x}){const g=t.useContext(o),{size:N,density:C,color:O}=g;return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:i,className:v(N,C,!1),children:[m(s)?e("span",{className:`${k} text-(--neba-muted-fg)`,children:s}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${k} text-(--neba-muted-fg) -rotate-90`,children:e(r,{})})]}),e(a.Portal,{children:e(a.Positioner,{className:"neba-portal z-50 [outline:none]",side:c,sideOffset:u,align:"start",children:e(a.Popup,{className:[y,f[N],d[N],h??""].filter(Boolean).join(" "),style:{...b(O,3),...x},children:p})})})]})}export function Menu({size:l="md",color:s="primary",density:i="default",trigger:r,open:c,defaultOpen:u,onOpenChange:m,side:p="bottom",align:h="start",sideOffset:x=6,modal:g=!0,openOnHover:N=!1,loopFocus:C=!0,disabled:v=!1,className:k,style:O,children:z}){const I=t.useMemo(()=>({size:l,color:s,density:i}),[l,s,i]);return e(o.Provider,{value:I,children:n(a.Root,{open:c,defaultOpen:u,onOpenChange:e=>m?.(e),modal:g,loopFocus:C,disabled:v,children:[r?e(a.Trigger,{render:r,openOnHover:N,disabled:v}):null,e(a.Portal,{children:e(a.Positioner,{className:"neba-portal z-50 [outline:none]",side:p,align:h,sideOffset:x,children:e(a.Popup,{className:[y,f[l],d[l],k??""].filter(Boolean).join(" "),style:{...b(s,3),...O},children:z})})})]})})}export function ContextMenu({size:l="md",color:a="primary",density:i="default",content:r,children:c,open:u,defaultOpen:m,onOpenChange:p,loopFocus:h=!0,disabled:x=!1,className:g,style:N}){const C=t.useMemo(()=>({size:l,color:a,density:i}),[l,a,i]);return e(o.Provider,{value:C,children:n(s.Root,{open:u,defaultOpen:m,onOpenChange:e=>p?.(e),loopFocus:h,disabled:x,children:[e(s.Trigger,{children:c}),e(s.Portal,{children:e(s.Positioner,{className:"neba-portal z-50 [outline:none]",children:e(s.Popup,{className:[y,f[l],d[l],g??""].filter(Boolean).join(" "),style:{...b(a,3),...N},children:r})})})]})})}

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

@@ -0,0 +1,2 @@
+export { ContextMenu, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu } from './Menu';
+export type { ContextMenuProps, MenuCheckboxItemProps, MenuGroupProps, MenuItemProps, MenuProps, MenuRadioGroupProps, MenuRadioItemProps, MenuSeparatorProps, MenuSubmenuProps } from './Menu';

package/dist/components/menu/index.js

@@ -0,0 +1 @@
+export{ContextMenu,Menu,MenuCheckboxItem,MenuGroup,MenuItem,MenuRadioGroup,MenuRadioItem,MenuSeparator,MenuSubmenu}from"./Menu";

package/dist/components/number-field/NumberField.d.ts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+/**
+ * Where the two steppers sit.
+ *
+ * - `end` — both at the trailing edge, the way a spinner has always looked.
+ * - `split` — minus at the start, plus at the end, with the number between
+ *   them. For a quantity that is nudged rather than typed.
+ * - `none` — no buttons. The field is still a number field: the arrow keys,
+ *   the clamping and the formatting all stay.
+ *
+ * There is deliberately no stacked pair of half-height chevrons. At `xs` each
+ * arrow would be under three pixels tall, and a target that small is a target
+ * nobody hits.
+ */
+export type NumberFieldSteppers = 'end' | 'split' | 'none';
+export interface NumberFieldProps extends NebaStyleProps {
+    /**
+     * Drop shadow depth. `0` (the default) is flat — a field is a well, not a
+     * surface that floats.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /** The number. Use with `onValueChange` for a controlled field. */
+    value?: number | null;
+    /** The initial number, for an uncontrolled field. */
+    defaultValue?: number;
+    /** Called on every change — typing, stepping, the wheel. */
+    onValueChange?: (value: number | null) => void;
+    /**
+     * Called when the value settles: on blur after typing, on pointer release
+     * after a press, and together with `onValueChange` for the keyboard.
+     */
+    onValueCommitted?: (value: number | null) => void;
+    /** The bottom of the range. Stepping stops here. */
+    min?: number;
+    /** The top of the range. */
+    max?: number;
+    /** How far one step goes. `'any'` turns step validation off. @default 1 */
+    step?: number | 'any';
+    /** The step taken while Shift is held. @default 10 */
+    largeStep?: number;
+    /** The step taken while Alt is held. @default 0.1 */
+    smallStep?: number;
+    /** Whether stepping snaps to multiples of the step. @default false */
+    snapOnStep?: boolean;
+    /**
+     * Whether the wheel changes the value while the field is focused and hovered.
+     * Off by default: a page that scrolls under the pointer and a field that
+     * changes under it are the same gesture, and only one of them was meant.
+     * @default false
+     */
+    allowWheelScrub?: boolean;
+    /**
+     * How the number is written — currency, percent, decimal places. Passed
+     * straight to `Intl.NumberFormat`, so the field shows `$1,240.00` and still
+     * reports `1240`.
+     */
+    format?: Intl.NumberFormatOptions;
+    /** Which locale the number is written and parsed in. Defaults to the runtime's. */
+    locale?: Intl.LocalesArgument;
+    /** Where the steppers sit, or `none` for a field without them. @default 'end' */
+    steppers?: NumberFieldSteppers;
+    /** Accessible name of the increment button. */
+    incrementLabel?: string;
+    /** Accessible name of the decrement button. */
+    decrementLabel?: string;
+    /**
+     * Label above the control, wired to it by Base UI's Field. There is no
+     * floating variant on purpose: floating labels need a `transform`.
+     */
+    label?: React.ReactNode;
+    /** Helper text below the control. */
+    description?: React.ReactNode;
+    /** Error message below the control. Its presence also turns the field invalid. */
+    error?: React.ReactNode;
+    /** Forces the invalid state without a message. Defaults to `!!error`. */
+    invalid?: boolean;
+    /** Content placed before the number — a currency mark, a unit, an icon. */
+    startIcon?: React.ReactNode;
+    /** Content placed after the number, before the steppers. */
+    endIcon?: React.ReactNode;
+    /** Stretches to the width of the container. */
+    fullWidth?: boolean;
+    /** Unavailable. */
+    disabled?: boolean;
+    /** The number is shown but cannot be changed. */
+    readOnly?: boolean;
+    /** Whether a value must be entered before the form is submitted. */
+    required?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    /** Placeholder shown while the field is empty. */
+    placeholder?: string;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A field that only holds a number.
+ *
+ * The shell is a TextField's, to the pixel, because a form where the quantity
+ * box is a different height or radius from the boxes around it is a form that
+ * looks assembled rather than designed. What is added on top is a real numeric
+ * control: arrow keys and the steppers move by `step` (Shift for `largeStep`,
+ * Alt for `smallStep`), the value clamps to `min`/`max`, and `format` writes it
+ * as currency or a percentage while `value` stays a plain number.
+ *
+ * Base UI owns the hard parts — parsing what was typed against the locale,
+ * clamping, the press-and-hold repeat on the steppers, and the hidden input
+ * that submits with a form.
+ */
+export declare function NumberField({ variant, size, color, density, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, style }: NumberFieldProps): React.JSX.Element;

package/dist/components/number-field/NumberField.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{NumberField as t}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{MinusIcon as l,PlusIcon as i}from"../../internal/icons";import{controlHeightClasses as r,controlTextLeadingClasses as s,disabledClasses as o,fieldReadOnlyClasses as c,fieldRestClasses as d,focusWithinRingClasses as m,gapClasses as u,hasContent as p,iconClasses as f,metaTextClasses as b,paddingXClasses as h,radiusClasses as x,stackGapClasses as g,surfaceSlots as v,transitionClasses as N}from"../../internal/styles";const j=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",N,"focus-within:[transition-duration:0ms]",m,f].join(" "),w=["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-accent)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export function NumberField({variant:m="outline",size:f="md",color:N="primary",density:k="default",elevation:y=0,value:S,defaultValue:_,onValueChange:V,onValueCommitted:I,min:C,max:O,step:z,largeStep:D,smallStep:L,snapOnStep:W,allowWheelScrub:$=!1,format:q,locale:B,steppers:F="end",incrementLabel:R="Increase",decrementLabel:E="Decrease",label:G,description:A,error:H,invalid:J,startIcon:K,endIcon:M,fullWidth:P=!1,disabled:Q=!1,readOnly:T=!1,required:U=!1,name:X,placeholder:Y,id:Z,className:ee,style:ne}){const te=p(H),ae=J??te,le=ae?"danger":N,ie=h[k][f],re={end:`${ie} pe-1`,split:"px-1",none:ie},se=e(t.Decrement,{"aria-label":E,className:w,children:e(l,{})}),oe=e(t.Increment,{"aria-label":R,className:w,children:e(i,{})}),ce="none"!==F&&!T;return n(a.Root,{disabled:Q,invalid:ae,className:["flex-col align-top",g[f],P?"flex w-full":"inline-flex",ee??""].filter(Boolean).join(" "),style:{...v(le,y),...ne},children:[G?e(a.Label,{className:[b[f],"font-medium",Q?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:G}):null,e(t.Root,{id:Z,name:X,className:"contents",value:S,defaultValue:_,onValueChange:e=>V?.(e),onValueCommitted:e=>I?.(e),min:C,max:O,step:z,largeStep:D,smallStep:L,snapOnStep:W,allowWheelScrub:$,format:q,locale:B,disabled:Q,readOnly:T,required:U,children:n(t.Group,{className:[j,r[f],s[f],x[f],u[f],ce?re[F]:ie,Q?o[m]:T?c[m]:d[m]].join(" "),children:[ce&&"split"===F?se:null,K?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:K}):null,e(t.Input,{placeholder:Y,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===F&&ce?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),M?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:M}):null,ce&&"end"===F?n("span",{className:"flex shrink-0 items-center gap-0.5",children:[se,oe]}):null,ce&&"split"===F?oe:null]})}),A?e(a.Description,{className:`${b[f]} text-(--neba-muted-fg)`,children:A}):null,te?e(a.Error,{match:!0,className:`${b[f]} text-(--n-accent)`,children:H}):null]})}

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

@@ -0,0 +1,2 @@
+export { NumberField } from './NumberField';
+export type { NumberFieldProps, NumberFieldSteppers } from './NumberField';

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

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

package/dist/components/overlay/Overlay.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import type { NebaAlign, NebaColor, NebaSize } from '../../types';
+/**
+ * How much of the page the overlay takes away.
+ *
+ * The four steps are one axis — how legible is what is behind — and they are
+ * tuned with the blur radius as much as with the alpha, because past about
+ * 16px a backdrop smears into flat colour and the scrim reads opaque no matter
+ * how low its alpha goes.
+ *
+ * - `scrim` — the neutral dim a Dialog puts behind itself. The page is still
+ *   there and still readable; it has only stopped being reachable.
+ * - `blur` — frosted. A lighter dim over a real blur, so the page is present as
+ *   shape and colour but not as words. For "this is being replaced".
+ * - `solid` — the page surface, opaque. For a screen that is genuinely gone.
+ * - `clear` — nothing drawn at all. Still blocks the pointer, which is the
+ *   whole reason to reach for it: an invisible sheet that catches a click.
+ */
+export type OverlayTone = 'scrim' | 'blur' | 'solid' | 'clear';
+/**
+ * An overlay takes `size`, `color` and `align` and stops there.
+ *
+ * There is no `variant` — the three weights answer "how much does this surface
+ * assert itself against the page", and an overlay has taken the page. There is
+ * no `elevation` either: the overlay *is* the plane everything else floats
+ * above, and a scrim with a drop shadow is a scrim with an edge.
+ */
+export interface OverlayProps {
+    /** The overlay is shown. Use with `onOpenChange` for a controlled overlay. */
+    open?: boolean;
+    /** Whether the overlay starts shown, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** How much of the page is taken away. @default 'scrim' */
+    tone?: OverlayTone;
+    /**
+     * Whether clicking the overlay or pressing Escape closes it.
+     *
+     * Off by default, which is the other way round from [Dialog](./dialog). A
+     * dialog asks a question and Escape is the universal "no"; an overlay is not
+     * asking anything — it is saying *wait* — and a save that can be dismissed
+     * by a stray click is a save the user will think finished. Turn it on for the
+     * overlay whose job is to catch a click outside something.
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Whether the page behind is taken away for the keyboard too. `'trap-focus'`
+     * leaves the page scrollable and clickable while still holding focus inside,
+     * which is what a `clear` overlay usually wants.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /** Where the content sits down the viewport. @default 'center' */
+    align?: NebaAlign;
+    /** Scale of the padding around the content. @default 'md' */
+    size?: NebaSize;
+    /** Semantic colour role. Reaches the focus ring and whatever the content reads. */
+    color?: NebaColor;
+    /**
+     * The accessible name of the overlay. An overlay that holds nothing readable
+     * — a bare spinner, a `clear` sheet — still has to say what it is, so this
+     * has a default rather than being optional.
+     * @default 'Overlay'
+     */
+    label?: string;
+    /** What sits on top of the scrim — a spinner, a line of text, a small card. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A sheet over the whole page that stops it being used.
+ *
+ * The difference from [Dialog](../surfaces/dialog) is what is *not* here: no
+ * surface, no border, no title, no actions. An overlay is the scrim on its own,
+ * with whatever the caller puts on top of it — most often a spinner and a line
+ * saying what is being waited for.
+ *
+ * It is not dismissible by default, and that is the one prop worth reading
+ * twice. Everything else Base UI owns: the portal, the scroll lock, the focus
+ * held inside, the page behind going inert, and focus returning to wherever it
+ * came from when the overlay closes.
+ */
+export declare function Overlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, color, label, className, style, children }: OverlayProps): React.JSX.Element;

package/dist/components/overlay/Overlay.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{surfaceSlots as n}from"../../internal/styles";const t={scrim:"bg-(--neba-scrim) [backdrop-filter:blur(2px)]",blur:"[background-color:color-mix(in_oklab,var(--neba-scrim)_55%,transparent)] [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-(--neba-surface)",clear:""},l={start:"items-start",center:"items-center",end:"items-end"},i={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},s=["[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function Overlay({open:o,defaultOpen:c,onOpenChange:p,tone:m="scrim",dismissible:d=!1,modal:b=!0,align:f="center",size:u="md",color:x="primary",label:y="Overlay",className:g,style:h,children:j}){return e(r.Root,{open:o,defaultOpen:c,modal:b,disablePointerDismissal:!d,onOpenChange:(e,a)=>{d||e||"escape-key"!==a.reason?p?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`neba-portal fixed inset-0 z-50 ${s} ${t[m]}`}),e(r.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",l[f],i[u]].join(" "),children:e(r.Popup,{"aria-label":y,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",s,g??""].filter(Boolean).join(" "),style:{...n(x,0),...h},children:j})})]})})}

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

@@ -0,0 +1,2 @@
+export { Overlay } from './Overlay';
+export type { OverlayProps, OverlayTone } from './Overlay';

package/dist/components/overlay/index.js

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