neba 0.0.1 → 1.1.0

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

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+export interface PaginationProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'onChange'> {
+    /** How many pages there are. Fewer than two and the whole control renders nothing. */
+    count: number;
+    /** The current page, 1-based. Use with `onPageChange` for a controlled set. */
+    page?: number;
+    /** Which page starts current, for an uncontrolled one. @default 1 */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /**
+     * How many pages are always shown on either side of the current one.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * How many pages are always shown at each end, whatever the current page is.
+     * `0` drops the first and last page from the row, leaving only the window.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /** Shows the jump-to-first and jump-to-last steppers. @default false */
+    showEdges?: boolean;
+    /** Shows the previous and next steppers. @default true */
+    showArrows?: boolean;
+    /**
+     * Drop shadow depth of the page buttons. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /** Unavailable. Every button in the row stops answering. */
+    disabled?: boolean;
+    /** Accessible name of the `<nav>`. @default 'Pagination' */
+    label?: string;
+    /** Accessible name of a page button. @default `Page ${page}` */
+    pageLabel?: (page: number) => string;
+    /** @default 'Previous page' */
+    previousLabel?: string;
+    /** @default 'Next page' */
+    nextLabel?: string;
+    /** @default 'First page' */
+    firstLabel?: string;
+    /** @default 'Last page' */
+    lastLabel?: string;
+}
+/**
+ * A row of page numbers.
+ *
+ * Every button in it is a real `Button`, which is the point: a pagination is not
+ * a new kind of control, it is buttons in a row that happen to know about each
+ * other. Reusing the component means the row inherits the acrylic surface, the
+ * press-instant/release-slow signature, the focus ring and every future change
+ * to any of them for free — and it means a `lg` pagination lines up with a `lg`
+ * button beside it, because it *is* one.
+ *
+ * `variant` sets how the pages at rest look; the current page is always `solid`,
+ * which is the one thing the row has to say without being read. That is why the
+ * default here is `text` rather than the `solid` a lone Button takes — nine
+ * filled buttons in a row say that all nine are the primary action.
+ *
+ * The markup is a `<nav>` around a `<ul>` because that is what a screen reader
+ * needs to hear: a named landmark it can skip, holding a list whose length says
+ * how far the pages go, with `aria-current="page"` marking where it is.
+ */
+export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;

package/dist/components/pagination/Pagination.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"../button/Button";import{ChevronIcon as r}from"../../internal/icons";import{controlTextClasses as i,gapClasses as l,srOnlyClasses as o}from"../../internal/styles";function s(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}function m(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const c={xs:"h-5.5 min-w-5.5",sm:"h-6.5 min-w-6.5",md:"h-8 min-w-8",lg:"h-10 min-w-10",xl:"h-12 min-w-12"};export const Pagination=a.forwardRef(function({variant:d="text",size:u="md",color:h="primary",density:f="compact",elevation:p=0,count:x,page:g,defaultPage:b=1,onPageChange:v,siblingCount:M=1,boundaryCount:w=1,showEdges:N=!1,showArrows:y=!0,disabled:L=!1,label:j="Pagination",pageLabel:k=e=>`Page ${e}`,previousLabel:C="Previous page",nextLabel:P="Next page",firstLabel:$="First page",lastLabel:z="Last page",className:B,children:A,...E},F){const[I,R]=a.useState(b),S=Math.min(Math.max(g??I,1),Math.max(x,1)),W=e=>{const t=Math.min(Math.max(e,1),x);t!==S&&(void 0===g&&R(t),v?.(t))};if(x<2)return null;const q=function(e,t,a,n){const r=s(1,Math.min(n,e)),i=s(Math.max(e-n+1,n+1),e),l=Math.max(Math.min(t-a,e-n-2*a-1),n+2),o=Math.min(Math.max(t+a,n+2*a+2),i.length>0?i[0]-2:e-1);return[...r,...l>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...s(l,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...i]}(x,S,M,w),D=S<=1,G=S>=x,H=(t,a,r,i,l,o)=>e("li",{className:"flex",children:e(n,{variant:d,size:u,color:h,density:f,elevation:p,disabled:L||i,"aria-label":a,startIcon:e("span",{className:`flex items-center ${l}`,children:o}),onClick:()=>W(r)})},t);return t("nav",{ref:F,"aria-label":j,className:["flex items-center",B??""].filter(Boolean).join(" "),...E,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${l[u]}`,children:[N?H("first",$,1,D,"rotate-180 rtl:rotate-0",e(m,{})):null,y?H("previous",C,S-1,D,"rotate-90 rtl:-rotate-90",e(r,{})):null,q.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(n,{variant:t===S?"solid":d,size:u,color:h,density:f,elevation:p,disabled:L,"aria-label":k(t),"aria-current":t===S?"page":void 0,className:"tabular-nums",onClick:()=>W(t),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--neba-muted-fg)",i[u],c[u]].join(" "),children:"…"},`slot-${a}`)),y?H("next",P,S+1,G,"-rotate-90 rtl:rotate-90",e(r,{})):null,N?H("last",z,x,G,"rtl:rotate-180",e(m,{})):null]}),e("span",{className:o,"aria-live":"polite",children:`${k(S)} of ${x}`}),A]})});

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

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

package/dist/components/pagination/index.js

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

package/dist/components/pill/Pill.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import type { NebaElevation, NebaPosition, NebaStyleProps } from '../../types';
+export interface PillProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onClick' | 'title'> {
+    /**
+     * Drop shadow depth. `2` here, against the `0` everything else defaults to.
+     *
+     * That is not an inconsistency: a Pill is defined by not being part of the
+     * page. Every other surface in the library rests on the page and earns its
+     * separation from the acrylic edge, so a shadow is opt-in. This one hovers
+     * over whatever is underneath it, and a lozenge floating flat on the content
+     * it is floating over reads as a mistake.
+     * @default 2
+     */
+    elevation?: NebaElevation;
+    /**
+     * The leading slot — a glyph, an avatar, a status dot, a photo.
+     *
+     * It is given a square box of its own and clipped to a circle, so an `<img>`
+     * lands in it as readily as an icon does: the image fills the box and is
+     * cropped rather than letterboxed, which is what a 20px avatar wants.
+     */
+    startIcon?: React.ReactNode;
+    /** The trailing slot. Outside the pressable area, so it can be a control. */
+    endIcon?: React.ReactNode;
+    /**
+     * The headline in the middle — what the pill is currently about.
+     *
+     * A prop rather than something to compose, for the reason Card's title is one:
+     * the arrangement is fixed and what a caller wants to decide is what goes in
+     * each slot. Almost every pill is a line of text and an optional second line
+     * under it, and spelling that as children means every caller inventing their
+     * own centring and type scale.
+     */
+    title?: React.ReactNode;
+    /** The second line, under the title. One step down and lighter. */
+    description?: React.ReactNode;
+    /**
+     * The second half, revealed when `expanded`.
+     *
+     * The pill grows downward into it rather than swapping to a different shape:
+     * one object saying more, which is the whole idea being borrowed here.
+     */
+    details?: React.ReactNode;
+    /** Whether `details` is showing. @default false */
+    expanded?: boolean;
+    /**
+     * How it sits in the page's scroll. `fixed` pins it against the viewport and
+     * centres it horizontally, which is the arrangement this shape exists for.
+     * @default 'static'
+     */
+    position?: NebaPosition;
+    /** Which edge it is held against when `position` is not `static`. @default 'top' */
+    side?: 'top' | 'bottom';
+    /** Passing it makes the row a real button. */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Anything the middle needs that `title` and `description` cannot say — a
+     * marquee, a pair of small readouts, a live counter. Rendered under them, in
+     * the same centred column.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A floating lozenge holding a small amount of live information.
+ *
+ * The shape is a stadium, which the house radius rule otherwise forbids: every
+ * control is held just short of the 50% that would make it a pill, because the
+ * flat run along its top and bottom edge is what still reads as a sheet with the
+ * corners cut off it. A Pill is the exception the rule is drawn against, and the
+ * exception works for the same reason the rule does — this is not a sheet lying
+ * on the page. It is an object hovering over it, and an object hovering over the
+ * page should not look like it was cut from the same material.
+ *
+ * `details` is revealed by animating a measured height, exactly as an Accordion
+ * panel is: nothing is transformed and no text is resampled, the pill is simply
+ * a window that opens. The measurement is a `ResizeObserver` rather than a
+ * hardcoded height, so a details area whose content changes — which is what live
+ * information does — grows with it.
+ */
+export declare const Pill: React.ForwardRefExoticComponent<PillProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/pill/Pill.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as o from"react";import{controlSlots as l,controlTextClasses as r,focusRingClasses as i,gapClasses as s,hasContent as a,iconClasses as c,iconSizeClasses as d,metaTextClasses as m,paddingXClasses as x,pressTransitionClasses as f,sheetBodyClasses as p,surfaceClasses as u,transitionClasses as h}from"../../internal/styles";const v={solid:[u,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:`${u} text-(--n-accent) bg-(--n-soft)`},b={solid:"hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)",outline:"hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] active:bg-(--n-panel-press)",text:"hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)"},g={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},w={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},j={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},y={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const Pill=o.forwardRef(function({variant:u="solid",size:N="md",color:k="secondary",density:z="default",elevation:$=2,startIcon:_,endIcon:C,title:R,description:B,details:H,expanded:I=!1,position:E="static",side:F="top",className:O,style:P,children:S,onClick:q,...A},D){const G=o.useRef(null),[J,K]=o.useState(0);o.useEffect(()=>{const e=G.current;if(!e)return;const n=new ResizeObserver(()=>{K(e.scrollHeight)});return n.observe(e),K(e.scrollHeight),()=>n.disconnect()},[H]);const L=Boolean(q),M=x[z][N],Q=n(t,{children:[a(_)?e("span",{className:`flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover ${d[N]}`,children:_}):null,a(R)||a(B)||a(S)?n("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",j[z][N]].join(" "),children:[a(R)?e("span",{className:"max-w-full truncate",children:R}):null,a(B)?e("span",{className:`max-w-full truncate font-normal ${m[N]} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:B}):null,S]}):null]});return n("div",{ref:D,className:["inline-flex max-w-full flex-col overflow-hidden align-middle",w[N],"font-medium whitespace-nowrap select-none",r[N],v[u],h,f,c,L?`neba-glow ${b[u]}`:"",y[E][F],O??""].filter(Boolean).join(" "),style:{...l(k,$,u),...P},...A,children:[n("div",{className:["flex shrink-0 items-center py-1",g[N],s[N],L?"ps-0":M,a(C)?"pe-1":L?"pe-0":""].join(" "),children:[L?e("button",{type:"button",className:["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",s[N],M,i].join(" "),onClick:q,children:Q}):Q,a(C)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:C}):null]}),a(H)?e("div",{className:["overflow-hidden","[transition:height_var(--neba-duration)_var(--neba-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),style:{height:I?J:0},inert:!I,children:e("div",{ref:G,className:`whitespace-normal ${M} pb-2 ${p[N]}`,children:H})}):null]})});

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

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