neba 1.6.0 → 1.8.0

package/dist/components/how-to-steps/HowToSteps.d.ts

@@ -0,0 +1,167 @@
+import * as React from 'react';
+import type { NebaColor, NebaDensity, NebaElevation, NebaOrientation, NebaSize, NebaTransition, NebaVariant } from '../../types.js';
+/** One step of the guide. */
+export interface HowToStep {
+    /** The heading, shown both in the list and over the step's own body. */
+    title: React.ReactNode;
+    /**
+     * A glyph before the title, over the step's own body.
+     *
+     * Only there, and not in the list: a row there already carries a numbered
+     * disc, and a glyph beside it is a second mark making the same claim about
+     * the same row. What an icon is good for is telling a reader *what kind* of
+     * step this is — a terminal, a file, a warning — which is a thing to say
+     * once, where the step is stated at full size.
+     */
+    icon?: React.ReactNode;
+    /** What the reader has to do. Anything — prose, a [CodeBlock], a screenshot. */
+    content?: React.ReactNode;
+    /** A picture above the content, for a step that is easier shown than said. */
+    image?: string;
+    /** What that picture says for a reader who cannot see it. Defaults to `title`. */
+    imageAlt?: string;
+}
+export interface HowToStepsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'content'> {
+    /**
+     * The steps, in the order they are to be done.
+     *
+     * An array rather than children, and this is the one place the component
+     * genuinely could not be built the other way: the list beside the body and
+     * the body itself are two renderings of the same data, and the panel is sized
+     * against *every* step rather than the one showing. A component that had to
+     * find its steps among its children could do neither.
+     */
+    steps: HowToStep[];
+    /** The guide's own heading, over both columns. */
+    title?: React.ReactNode;
+    /** Which step is showing. Pass it to drive the guide yourself. */
+    step?: number;
+    /** Where an uncontrolled guide starts. @default 0 */
+    defaultStep?: number;
+    /** Fires with the index whenever the step changes, however it changed. */
+    onStepChange?: (step: number) => void;
+    /** Whether the guide is finished. Pass it to drive that yourself too. */
+    completed?: boolean;
+    /** Whether an uncontrolled guide starts finished. @default false */
+    defaultCompleted?: boolean;
+    /** Fires when the guide is finished, and again when it is started over. */
+    onCompletedChange?: (completed: boolean) => void;
+    /**
+     * Which way the list of steps runs.
+     *
+     * `vertical` is the default: the numbers run down one side with the body
+     * beside them, which takes any number of steps and any amount to say about
+     * each. Below `sm` it stacks, because a rail and a paragraph side by side on
+     * a phone is two columns too narrow for either. `horizontal` runs the numbers
+     * across the top, and is only honest while every title is short.
+     * @default 'vertical'
+     */
+    orientation?: NebaOrientation;
+    /**
+     * How tall the guide may get before it scrolls. A number is pixels.
+     *
+     * Both the list and the body scroll inside it rather than the sheet growing.
+     * A guide with twenty steps is what this is for, and twenty rows that pushed
+     * the buttons off the bottom of the card would be a guide with no way
+     * forward.
+     */
+    maxHeight?: number | string;
+    /**
+     * How wide the list is while it is a column. A number is pixels.
+     * @default '15rem'
+     */
+    railWidth?: number | string;
+    /**
+     * The row of buttons under the body. Off, the list is the only way to move,
+     * which is what a guide inside a page that has navigation of its own wants.
+     * @default true
+     */
+    navigation?: boolean;
+    /**
+     * Draws a hairline between the list and the body — down the inner edge while
+     * they are two columns, along the bottom of the list once they have stacked.
+     *
+     * On by default. The two are different kinds of thing — one is a map, the
+     * other is the place the map points at — and space alone leaves that to be
+     * inferred from a gap that a narrow screen is about to take away.
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * How a step arrives when the reader moves to it, from the same vocabulary
+     * `transition` uses everywhere: an effect name, or the object form for the
+     * duration, the easing and the rest. `'none'` turns it off.
+     *
+     * It runs on the panel rather than on anything that is pressed, which is what
+     * keeps it inside the library's rule against moving a control: the buttons
+     * and the list rows hold still, and what animates is the content they
+     * changed.
+     *
+     * A reduced-motion preference switches it off entirely, as it does every
+     * other effect in the library.
+     * @default 'fade'
+     */
+    transition?: NebaTransition | 'none';
+    /**
+     * Whether there is a finished state at all.
+     *
+     * On, the last step's button says "Done" and pressing it replaces the body
+     * with a panel that says so and offers to start again. Off, the last step is
+     * simply the last step.
+     * @default true
+     */
+    completion?: boolean;
+    /** What the finished panel says, in place of the `locale`'s own sentence. */
+    completedContent?: React.ReactNode;
+    /**
+     * Weight of the sheet, said the way a *container* says it: the guide is never
+     * dyed, because what is in it arrives with colours of its own.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /** @default 'md' */
+    size?: NebaSize;
+    /** The family the numbers, the connector and the buttons wear. @default 'primary' */
+    color?: NebaColor;
+    /** @default 'default' */
+    density?: NebaDensity;
+    /** Drop shadow depth. `0` (the default) is flat. @default 0 */
+    elevation?: NebaElevation;
+    /**
+     * Which language the guide's own words are in — the four buttons and the
+     * sentence at the end. A BCP 47 tag such as `ko`, `pt-BR` or `zh-Hant`;
+     * unsupported tags fall back to English.
+     */
+    locale?: string;
+    /** The four button labels, written out over the `locale`. */
+    previousLabel?: string;
+    nextLabel?: string;
+    doneLabel?: string;
+    restartLabel?: string;
+}
+/**
+ * A guide the reader walks through: numbered steps down one side, one step's
+ * instructions at a time beside them, and a way forward under those.
+ *
+ * It is [Timeline]'s interactive sibling, and the two are deliberately not one
+ * component. A Timeline *reports* — this happened, then this did, and here is
+ * where things have got to — and nothing in it is pressed. A HowToSteps *asks*:
+ * the reader is meant to do the thing on the screen and then say they have,
+ * which needs a current step, a way to change it, and an end.
+ *
+ * Two things about how it is built are load-bearing rather than incidental.
+ *
+ * **Every step's body is rendered into the same grid cell**, with the ones not
+ * showing left in the document, `invisible` and `inert`. The panel is therefore
+ * as tall as the tallest step at every moment, so moving between a one-line
+ * step and a five-line one does not resize the card the guide sits in — which,
+ * on a page the reader has already scrolled, moves everything under it. The
+ * finished panel is in that cell too, for the same reason.
+ *
+ * **The list is a list of buttons and not a tablist.** A stepper looks like
+ * tabs and is not one: the panels are ordered, the reader is expected to arrive
+ * at them in that order, and `aria-current="step"` is the attribute that says
+ * so. A tablist's roving focus would tell a screen reader that these are
+ * interchangeable views of one thing.
+ */
+export declare const HowToSteps: React.ForwardRefExoticComponent<HowToStepsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/how-to-steps/HowToSteps.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as l from"react";import{Button as r}from"../button/Button.js";import{boxPaddingClasses as a}from"../box/Box.js";import{CheckIcon as i,ChevronIcon as o,RestartIcon as s,SuccessIcon as c}from"../../internal/icons.js";import{stepsMessages as m,useMessages as d}from"../../internal/i18n.js";import{transitionProps as p}from"../../internal/animate.js";import{cx as f,hasContent as x,iconClasses as u,metaTextClasses as b,radiusClasses as h,sheetBodyClasses as g,sheetSectionGapClasses as v,sheetTitleClasses as N,srOnlyClasses as w,surfaceClasses as k,surfaceSlots as y,toLength as j,transitionClasses as C}from"../../internal/styles.js";const z={xs:{box:"1.25rem",text:"text-[0.625rem]"},sm:{box:"1.5rem",text:"text-[0.6875rem]"},md:{box:"1.75rem",text:"text-[0.75rem]"},lg:{box:"2rem",text:"text-[0.8125rem]"},xl:{box:"2.25rem",text:"text-[0.875rem]"}},S={default:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"},compact:{xs:"gap-0",sm:"gap-0",md:"gap-0.5",lg:"gap-0.5",xl:"gap-1"}},L={solid:[k,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[k,"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"};function I(e,t){return e.replace(/\{(\w+)\}/g,(e,n)=>t[n]??e)}function R(e){return"string"==typeof e?e:""}export const HowToSteps=/*@__PURE__*/l.forwardRef(function({steps:k,title:B,step:_,defaultStep:H=0,onStepChange:M,completed:T,defaultCompleted:$=!1,onCompletedChange:A,orientation:E="vertical",maxHeight:F,railWidth:W="15rem",navigation:q=!0,divider:D=!0,transition:G="fade",completion:J=!0,completedContent:K,variant:O="outline",size:P="md",color:Q="primary",density:U="default",elevation:V=0,locale:X,previousLabel:Y,nextLabel:Z,doneLabel:ee,restartLabel:te,className:ne,style:le,...re},ae){const ie=d(m,X),oe=l.useId(),[se,ce]=l.useState(H),[me,de]=l.useState($),pe=void 0!==_,fe=void 0!==T,xe=k.length,ue=Math.min(Math.max(pe?_:se,0),Math.max(xe-1,0)),be=J&&(fe?T:me),he=void 0!==F,ge="vertical"===E,ve=l.useRef(null),Ne=l.useRef(null);if(l.useEffect(()=>{const e=ve.current,t=Ne.current;if(!e||!t)return;const n=e.getBoundingClientRect(),l=t.getBoundingClientRect();ge?l.top<n.top?e.scrollTop-=n.top-l.top:l.bottom>n.bottom&&(e.scrollTop+=l.bottom-n.bottom):l.left<n.left?e.scrollLeft-=n.left-l.left:l.right>n.right&&(e.scrollLeft+=l.right-n.right)},[ue,ge]),0===xe)return null;const we=(e,t=!1)=>{fe||de(t),be!==t&&A?.(t),t||(pe||ce(e),e!==ue&&M?.(e))},ke=0===ue,ye=ue===xe-1,je="none"===G?null:p(G),Ce=t=>{const n=be||t<ue,l=!be&&t===ue;return e("span",{"aria-hidden":"true",className:f("z-1 flex shrink-0 items-center justify-center rounded-full border font-medium","size-(--n-step-mark) [&_svg]:size-[1.15em]",z[P].text,C,n?"bg-(--n-fill) text-(--n-on-solid) [border-color:transparent]":l?"bg-(--neba-surface) text-(--n-accent) [border-color:var(--n-accent)]":"bg-(--neba-surface) text-(--neba-muted-fg) [border-color:var(--n-line)]"),children:n?e(i,{}):t+1})},ze=e("ol",{ref:ve,"aria-label":ie.steps,className:f("m-0 flex list-none p-0",ge?"flex-col":"flex-row",S[U][P],he&&ge?"min-h-0 overflow-y-auto overscroll-contain":"",ge?"":"overflow-x-auto overscroll-contain"),children:k.map((n,l)=>{const r=be||l<ue,a=!be&&l===ue;return t("li",{ref:a?Ne:void 0,className:f("relative",ge?"":"min-w-0 flex-1"),children:[l<xe-1?e("span",{"aria-hidden":"true",className:f("absolute",C,r?"bg-(--n-fill)":"bg-(--n-line)",ge?["w-px","[inset-inline-start:calc(0.25rem+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark))]","[height:calc(100%-var(--n-step-mark))]"].join(" "):["h-px","[inset-inline-start:calc(50%+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark)/2)]","[width:calc(100%-var(--n-step-mark))]"].join(" "))}):null,t("button",{type:"button",onClick:()=>we(l),"aria-current":a?"step":void 0,className:f("flex w-full cursor-pointer items-center p-1 text-start",ge?"gap-3":"flex-col gap-1.5 text-center",h.sm,"hover:bg-(--n-soft)",C,"focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1"),children:[Ce(l),e("span",{className:f("min-w-0",ge?"truncate":"",b[P],a?"font-medium text-(--neba-fg)":"text-(--neba-muted-fg)"),children:n.title}),e("span",{className:w,children:I(ie.step,{index:String(l+1),title:R(n.title)})})]})]},l)})}),Se=t("div",{className:f("grid flex-1 grid-cols-1",he?"min-h-0":""),children:[k.map((n,l)=>{const r=be||l!==ue;return t("div",{"aria-hidden":r,inert:r||void 0,className:f("col-start-1 row-start-1 min-w-0",he?"overflow-y-auto overscroll-contain":"",r?"invisible":je?.className??""),style:r?void 0:je?.style,children:[t("div",{className:"mb-3 flex items-baseline gap-3",children:[x(n.icon)?e("span",{"aria-hidden":"true",className:f("flex h-[1lh] shrink-0 items-center text-(--n-accent)",N[P],u),children:n.icon}):null,e("h4",{className:f("m-0 min-w-0 flex-1 font-medium",N[P]),children:n.title}),e("span",{className:f("shrink-0 text-(--neba-muted-fg) tabular-nums",b[P]),children:I(ie.position,{index:String(l+1),total:String(xe)})})]}),n.image?e("img",{src:n.image,alt:n.imageAlt??R(n.title),className:f("mb-3 max-h-72 w-full object-contain",h[P])}):null,x(n.content)?e("div",{className:f("min-w-0",g[P]),children:n.content}):null]},l)}),J?t("div",{"aria-hidden":!be,inert:!be||void 0,className:f("col-start-1 row-start-1 flex min-w-0 flex-col items-center justify-center gap-2 py-4 text-center",be?je?.className??"":"invisible"),style:be?je?.style:void 0,children:[e("span",{"aria-hidden":"true",className:"text-(--n-accent) [&_svg]:size-9",children:e(c,{})}),e("p",{className:f("m-0 font-medium",g[P]),children:K??ie.completed})]}):null]});return t("div",{ref:ae,"aria-labelledby":x(B)?oe:void 0,className:f("flex min-w-0 flex-col",h[P],a[U][P],v[P],L[O],C,ne),style:{...y(Q,V),"--n-fill":`var(--neba-${Q}-fill)`,"--n-on-solid":`var(--neba-${Q}-on-solid)`,"--n-step-mark":z[P].box,"--n-step-rail":j(W),...he?{maxHeight:j(F)}:null,...le},...re,children:[x(B)?e("h3",{id:oe,className:f("m-0 shrink-0 font-medium",N[P]),children:B}):null,t("div",{className:f("flex min-w-0 flex-1 flex-col",he?"min-h-0":"",ge?"gap-4 sm:flex-row sm:gap-5":"gap-4"),children:[e("div",{className:f("flex min-w-0 flex-col",he?"min-h-0":"",ge?"sm:w-(--n-step-rail) sm:shrink-0":"",D?ge?"border-b pb-4 sm:border-b-0 sm:border-e sm:pb-0 sm:pe-5":"border-b pb-4":"",D?"[border-color:var(--n-line)]":""),children:ze}),t("div",{className:f("flex min-w-0 flex-1 flex-col",he?"min-h-0":"",v[P]),children:[Se,q?e("div",{className:"flex shrink-0 flex-wrap items-center justify-end gap-2",children:be?e(r,{size:P,variant:"outline",color:Q,startIcon:e(s,{}),onClick:()=>we(0),children:te??ie.restart}):t(n,{children:[e(r,{size:P,variant:"outline",color:Q,disabled:ke,startIcon:e("span",{className:"rotate-90 rtl:-rotate-90",children:e(o,{})}),onClick:()=>we(ue-1),children:Y??ie.previous}),e(r,ye&&J?{size:P,variant:"solid",color:Q,startIcon:e(i,{}),onClick:()=>we(ue,!0),children:ee??ie.done}:{size:P,variant:"solid",color:Q,disabled:ye,endIcon:e("span",{className:"-rotate-90 rtl:rotate-90",children:e(o,{})}),onClick:()=>we(ue+1),children:Z??ie.next})]})}):null]})]})]})});

package/dist/components/how-to-steps/index.d.ts

@@ -0,0 +1,2 @@
+export { HowToSteps } from './HowToSteps.js';
+export type { HowToStep, HowToStepsProps } from './HowToSteps.js';

package/dist/components/how-to-steps/index.js

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaColor, NebaSize, NebaTransition } from '../../types';
+import type { NebaColor, NebaSize, NebaTransition } from '../../types.js';
 export interface IconProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
     /**
      * The glyph. An `<svg>` element, an `<img>`, a component from an icon set, or

package/dist/components/icon/Icon.js

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

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

@@ -1,2 +1,2 @@
-export { Icon } from './Icon';
-export type { IconProps } from './Icon';
+export { Icon } from './Icon.js';
+export type { IconProps } from './Icon.js';

package/dist/components/icon/index.js

@@ -1 +1 @@
-export{Icon}from"./Icon";
+export{Icon}from"./Icon.js";

package/dist/components/icon-button/IconButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ButtonProps } from '../button/Button';
+import { type ButtonProps } from '../button/Button.js';
 export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'startIcon' | 'endIcon'> {
     /**
      * The glyph. Wrap it in an `Icon` when it needs a size of its own; passed bare

package/dist/components/icon-button/IconButton.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{Button as o}from"../button/Button";export const IconButton=r.forwardRef(function({icon:r,label:e,style:a,...n},s){return t(o,{ref:s,"aria-label":e,startIcon:r,style:{borderRadius:"9999px",...a},...n})});
+import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{Button as o}from"../button/Button.js";export const IconButton=/*@__PURE__*/r.forwardRef(function({icon:r,label:e,style:a,...n},s){return t(o,{ref:s,"aria-label":e,startIcon:r,style:{borderRadius:"9999px",...a},...n})});

package/dist/components/icon-button/index.d.ts

@@ -1,2 +1,2 @@
-export { IconButton } from './IconButton';
-export type { IconButtonProps } from './IconButton';
+export { IconButton } from './IconButton.js';
+export type { IconButtonProps } from './IconButton.js';

package/dist/components/icon-button/index.js

@@ -1 +1 @@
-export{IconButton}from"./IconButton";
+export{IconButton}from"./IconButton.js";

package/dist/components/line-chart/LineChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type CartesianChartProps } from '../../internal/chart-frame';
-import { type ChartMarkers } from '../../internal/chart-line';
-import type { NebaChartCurve, NebaChartValueLabels } from '../../types';
+import { type CartesianChartProps } from '../../internal/chart-frame.js';
+import { type ChartMarkers } from '../../internal/chart-line.js';
+import type { NebaChartCurve, NebaChartValueLabels } from '../../types.js';
 export interface LineChartProps extends CartesianChartProps {
     /**
      * How the line gets from one point to the next.

package/dist/components/line-chart/LineChart.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame";import{LineSeries as n}from"../../internal/chart-line";export function LineChart({curve:a="linear",markers:o="auto",gradient:c=!1,connectNulls:i=!1,valueLabels:l="none",stacked:s=!1,...m}){const u=r.useId().replace(/:/g,"");return e(t,{...m,stacked:s,inset:!0,includeZero:!1,headroom:"none"===l?0:10,children:r=>e(n,{context:r,curve:a,filled:!1,stacked:s,markers:o,valueLabels:l,connectNulls:i,gradient:c,idPrefix:u})})}
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame.js";import{LineSeries as n}from"../../internal/chart-line.js";export function LineChart({curve:a="linear",markers:o="auto",gradient:c=!1,connectNulls:i=!1,valueLabels:s="none",stacked:l=!1,...m}){const u=r.useId().replace(/:/g,"");return e(t,{...m,stacked:l,inset:!0,includeZero:!1,headroom:"none"===s?0:10,children:r=>e(n,{context:r,curve:a,filled:!1,stacked:l,markers:o,valueLabels:s,connectNulls:i,gradient:c,idPrefix:u})})}

package/dist/components/line-chart/index.d.ts

@@ -1,2 +1,2 @@
-export { LineChart } from './LineChart';
-export type { LineChartProps } from './LineChart';
+export { LineChart } from './LineChart.js';
+export type { LineChartProps } from './LineChart.js';

package/dist/components/line-chart/index.js

@@ -1 +1 @@
-export{LineChart}from"./LineChart";
+export{LineChart}from"./LineChart.js";

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { NebaElevation, NebaStyleProps } from '../../types';
+import type { NebaElevation, NebaStyleProps } from '../../types.js';
 export interface ListProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'ul'>, 'color'> {
     /**
      * Drop shadow depth. `0` (the default) is flat.

package/dist/components/list/List.js

@@ -1 +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]})});
+import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useRender as s}from"@base-ui/react/use-render";import{boxPaddingXClasses as l}from"../box/Box.js";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.js";const h=/*@__PURE__*/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=/*@__PURE__*/t.forwardRef(function({variant:n="outline",size:r="md",color:l="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(" "),j=s({render:d,ref:g,props:{role:"list",className:N,style:{...p(l,i),...f},children:x,...v}});return e(h.Provider,{value:y,children:j})});export const ListItem=/*@__PURE__*/t.forwardRef(function({startIcon:s,endIcon:m,description:x,action:p,href:b,selected:y=!1,disabled:N=!1,className:j,children:w,onClick:k,...B},C){const{size:z,density:I,dividers:$}=t.useContext(h),L=Boolean(k||b)&&!N,R=l[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(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:s}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[o(w)?e("span",{className:"truncate",children:w}):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",j??""].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

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

package/dist/components/list/index.js

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaAlign, NebaColor, NebaSide, NebaStyleProps } from '../../types';
+import type { NebaAlign, NebaColor, NebaSide, NebaStyleProps } from '../../types.js';
 /**
  * A menu takes `size`, `color` and `density` and stops there.
  *

package/dist/components/menu/Menu.js

@@ -1 +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})})})]})})}
+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.js";import{CheckIcon as i,ChevronIcon as r,DotIcon as c}from"../../internal/icons.js";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.js";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:j}){const z=t.useContext(o),{size:I,density:M}=z,$=n(l,{children:[m(c)?e("span",{className:`${k} text-(--neba-muted-fg)`,children:c}):null,e(O,{description:p,size:I,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[I]}`,children:u}):null]}),w=f?b(f,0):void 0,P=w||j?{...w,...j}:void 0;return void 0!==i?e(a.LinkItem,{href:i,target:r,label:y,closeOnClick:x,onClick:s,className:v(I,M,Boolean(f),C),style:P,children:$}):e(a.Item,{disabled:g,label:y,closeOnClick:x,onClick:s,className:v(I,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:j,density:z}=t.useContext(o),I=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(j,z,Boolean(p),N),style:I||C?{...I,...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:j,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[j]}`,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),j=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:j||y?{...j,...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:j}){const z=t.useMemo(()=>({size:l,color:s,density:i}),[l,s,i]);return e(o.Provider,{value:z,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:j})})})]})})}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

@@ -1,2 +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';
+export { ContextMenu, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu } from './Menu.js';
+export type { ContextMenuProps, MenuCheckboxItemProps, MenuGroupProps, MenuItemProps, MenuProps, MenuRadioGroupProps, MenuRadioItemProps, MenuSeparatorProps, MenuSubmenuProps } from './Menu.js';

package/dist/components/menu/index.js

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

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

@@ -1,8 +1,8 @@
 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';
+import type { NebaMockupBezel, NebaMockupDevice, NebaMockupFinish, NebaMockupHardware, NebaMockupNotch, NebaMockupOrientation, NebaMockupOs, NebaMockupResolution } from '../../internal/mockup.js';
+import type { NebaColor, NebaElevation, NebaSize, NebaTransition } from '../../types.js';
+export type { NebaMockupBezel, NebaMockupDevice, NebaMockupFinish, NebaMockupHardware, NebaMockupNotch, NebaMockupOrientation, NebaMockupOs, NebaMockupResolution } from '../../internal/mockup.js';
 export interface MockupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
     /**
      * Which machine this is a picture of. The one prop with no default: a mockup

package/dist/components/mockup/Mockup.js

@@ -1 +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}})});
+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.js";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.js";import{surfaceSlots as m}from"../../internal/styles.js";const p="undefined"==typeof document?r.useEffect:r.useLayoutEffect;export const Mockup=/*@__PURE__*/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

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

package/dist/components/mockup/index.js

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps } from '../../types';
+import type { NebaElevation, NebaStyleProps } from '../../types.js';
 /**
  * Where the two steppers sit.
  *

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

@@ -1 +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{useMessages as l}from"../../internal/i18n";import{MinusIcon as i,PlusIcon as r}from"../../internal/icons";import{controlHeightClasses as s,controlTextLeadingClasses as o,disabledClasses as c,fieldReadOnlyClasses as d,fieldRestClasses as m,focusWithinRingClasses as u,gapClasses as p,hasContent as f,iconClasses as b,metaTextClasses as h,paddingXClasses as x,radiusClasses as g,stackGapClasses as v,surfaceSlots as N,transitionClasses as j}from"../../internal/styles";const w=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",j,"focus-within:[transition-duration:0ms]",u,b].join(" "),y=["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:u="outline",size:b="md",color:j="primary",density:k="default",elevation:S=0,value:_,defaultValue:V,onValueChange:C,onValueCommitted:I,min:O,max:z,step:L,largeStep:W,smallStep:$,snapOnStep:q,allowWheelScrub:B=!1,format:D,locale:F,steppers:R="end",incrementLabel:E,decrementLabel:G,label:A,description:H,error:J,invalid:K,startIcon:M,endIcon:P,fullWidth:Q=!1,disabled:T=!1,readOnly:U=!1,required:X=!1,name:Y,placeholder:Z,id:ee,className:ne,style:te,...ae}){const le=l("string"==typeof F?F:void 0),ie=f(J),re=K??ie,se=re?"danger":j,oe=x[k][b],ce={end:`${oe} pe-1`,split:"px-1",none:oe},de=e(t.Decrement,{"aria-label":G??le.number.decrease,className:y,children:e(i,{})}),me=e(t.Increment,{"aria-label":E??le.number.increase,className:y,children:e(r,{})}),ue="none"!==R&&!U;return n(a.Root,{disabled:T,invalid:re,className:["flex-col align-top",v[b],Q?"flex w-full":"inline-flex",ne??""].filter(Boolean).join(" "),style:{...N(se,S),...te},...ae,children:[A?e(a.Label,{className:[h[b],"font-medium",T?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:A}):null,e(t.Root,{id:ee,name:Y,className:"contents",value:_,defaultValue:V,onValueChange:e=>C?.(e),onValueCommitted:e=>I?.(e),min:O,max:z,step:L,largeStep:W,smallStep:$,snapOnStep:q,allowWheelScrub:B,format:D,locale:F,disabled:T,readOnly:U,required:X,children:n(t.Group,{className:[w,s[b],o[b],g[b],p[b],ue?ce[R]:oe,T?c[u]:U?d[u]:m[u]].join(" "),children:[ue&&"split"===R?de:null,M?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:M}):null,e(t.Input,{placeholder:Z,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===R&&ue?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),P?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:P}):null,ue&&"end"===R?n("span",{className:"flex shrink-0 items-center gap-0.5",children:[de,me]}):null,ue&&"split"===R?me:null]})}),H?e(a.Description,{className:`${h[b]} text-(--neba-muted-fg)`,children:H}):null,ie?e(a.Error,{match:!0,className:`${h[b]} text-(--n-accent)`,children:J}):null]})}
+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{numberMessages as l,useMessages as i}from"../../internal/i18n.js";import{MinusIcon as r,PlusIcon as s}from"../../internal/icons.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,disabledClasses as d,fieldReadOnlyClasses as m,fieldRestClasses as u,focusWithinRingClasses as p,gapClasses as f,hasContent as b,iconClasses as h,metaTextClasses as x,paddingXClasses as g,radiusClasses as v,stackGapClasses as N,surfaceSlots as j,transitionClasses as w}from"../../internal/styles.js";const y=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",w,"focus-within:[transition-duration:0ms]",p,h].join(" "),k=["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:p="outline",size:h="md",color:w="primary",density:S="default",elevation:_=0,value:V,defaultValue:C,onValueChange:I,onValueCommitted:O,min:z,max:L,step:W,largeStep:$,smallStep:q,snapOnStep:B,allowWheelScrub:D=!1,format:F,locale:R,steppers:E="end",incrementLabel:G,decrementLabel:A,label:H,description:J,error:K,invalid:M,startIcon:P,endIcon:Q,fullWidth:T=!1,disabled:U=!1,readOnly:X=!1,required:Y=!1,name:Z,placeholder:ee,id:ne,className:te,style:ae,...le}){const ie=i(l,"string"==typeof R?R:void 0),re=b(K),se=M??re,oe=se?"danger":w,ce=g[S][h],de={end:`${ce} pe-1`,split:"px-1",none:ce},me=e(t.Decrement,{"aria-label":A??ie.decrease,className:k,children:e(r,{})}),ue=e(t.Increment,{"aria-label":G??ie.increase,className:k,children:e(s,{})}),pe="none"!==E&&!X;return n(a.Root,{disabled:U,invalid:se,className:["flex-col align-top",N[h],T?"flex w-full":"inline-flex",te??""].filter(Boolean).join(" "),style:{...j(oe,_),...ae},...le,children:[H?e(a.Label,{className:[x[h],"font-medium",U?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:H}):null,e(t.Root,{id:ne,name:Z,className:"contents",value:V,defaultValue:C,onValueChange:e=>I?.(e),onValueCommitted:e=>O?.(e),min:z,max:L,step:W,largeStep:$,smallStep:q,snapOnStep:B,allowWheelScrub:D,format:F,locale:R,disabled:U,readOnly:X,required:Y,children:n(t.Group,{className:[y,o[h],c[h],v[h],f[h],pe?de[E]:ce,U?d[p]:X?m[p]:u[p]].join(" "),children:[pe&&"split"===E?me:null,P?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:P}):null,e(t.Input,{placeholder:ee,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===E&&pe?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),Q?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:Q}):null,pe&&"end"===E?n("span",{className:"flex shrink-0 items-center gap-0.5",children:[me,ue]}):null,pe&&"split"===E?ue:null]})}),J?e(a.Description,{className:`${x[h]} text-(--neba-muted-fg)`,children:J}):null,re?e(a.Error,{match:!0,className:`${x[h]} text-(--n-accent)`,children:K}):null]})}

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

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

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps } from '../../types';
+import type { NebaElevation, NebaStyleProps } from '../../types.js';
 /**
  * What may be typed into a slot.
  *

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaAlign, NebaColor, NebaSize } from '../../types';
+import type { NebaAlign, NebaColor, NebaSize } from '../../types.js';
 /**
  * How much of the page the overlay takes away.
  *

package/dist/components/overlay/Overlay.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{useMessages as n}from"../../internal/i18n";import{surfaceSlots as l}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:""},i={start:"items-start",center:"items-center",end:"items-end"},o={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:c,defaultOpen:m,onOpenChange:p,tone:d="scrim",dismissible:b=!1,modal:f=!0,align:u="center",size:x="md",color:y="primary",locale:g,label:h,className:j,style:k,children:v,...O}){const _=n(g);return e(r.Root,{open:c,defaultOpen:m,modal:f,disablePointerDismissal:!b,onOpenChange:(e,a)=>{b||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[d]}`}),e(r.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",i[u],o[x]].join(" "),children:e(r.Popup,{"aria-label":h??_.overlay.label,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",s,j??""].filter(Boolean).join(" "),style:{...l(y,0),...k},...O,children:v})})]})})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{overlayMessages as n,useMessages as t}from"../../internal/i18n.js";import{surfaceSlots as l}from"../../internal/styles.js";const i={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:""},s={start:"items-start",center:"items-center",end:"items-end"},o={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},c=["[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function Overlay({open:m,defaultOpen:p,onOpenChange:d,tone:b="scrim",dismissible:f=!1,modal:u=!0,align:x="center",size:y="md",color:g="primary",locale:j,label:h,className:k,style:O,children:_,...v}){const N=t(n,j);return e(r.Root,{open:m,defaultOpen:p,modal:u,disablePointerDismissal:!f,onOpenChange:(e,a)=>{f||e||"escape-key"!==a.reason?d?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`neba-portal fixed inset-0 z-50 ${c} ${i[b]}`}),e(r.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",s[x],o[y]].join(" "),children:e(r.Popup,{"aria-label":h??N.label,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",c,k??""].filter(Boolean).join(" "),style:{...l(g,0),...O},...v,children:_})})]})})}

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

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

package/dist/components/overlay/index.js

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