neba 0.0.1 → 1.0.0

package/dist/components/card/Card.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { type BoxProps } from '../box/Box';
+export interface CardProps extends Omit<BoxProps, 'title' | 'padded'> {
+    /**
+     * The card's heading. A plain string is styled as the title; pass a real
+     * heading element (`title={<h2>…</h2>}`) when the card needs to appear in the
+     * document outline — it inherits the title's typography rather than the
+     * browser's.
+     */
+    title?: React.ReactNode;
+    /** A second line under the title, one step down the type scale and muted. */
+    subtitle?: React.ReactNode;
+    /**
+     * Content pinned to the end of the header row — a menu button, a status chip.
+     * Stays on the title's line while the title wraps beside it.
+     */
+    headerAction?: React.ReactNode;
+    /**
+     * The bottom area. Laid out as a wrapping row so a pair of buttons needs no
+     * wrapper of its own; anything else can bring its own layout.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Draws a hairline between the sections instead of separating them with
+     * space. The lines run the full width of the sheet, so the padding moves from
+     * the card onto each section.
+     * @default false
+     */
+    dividers?: boolean;
+    /** The card's body. */
+    children?: React.ReactNode;
+}
+/**
+ * A Box with the parts a card is made of laid out on it: a title, a subtitle,
+ * a body and a footer.
+ *
+ * The sections are props rather than compound sub-components — `<Card.Header>`,
+ * `<Card.Title>` — for the same reason TextField takes `label` and `description`
+ * as props: the arrangement is fixed, and the thing a caller wants to decide is
+ * what goes in each slot, not what order the slots come in.
+ *
+ * Every Box prop passes straight through, so a card is styled on exactly the
+ * same axes as the box it is.
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/Card.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import*as n from"react";import{Box as a,boxPaddingXClasses as r,boxPaddingYClasses as s}from"../box/Box";import{hasContent as i,metaTextClasses as o,sheetBodyClasses as c,sheetHeaderGapClasses as d,sheetSectionGapClasses as m,sheetTitleClasses as f}from"../../internal/styles";export const Card=n.forwardRef(function({size:n="md",density:u="default",title:x,subtitle:h,headerAction:N,footer:p,dividers:$=!1,className:b,children:v,...y},j){const k=r[u][n],g=s[u][n],w=$?`${k} ${g}`:k,B=i(x)||i(h)||i(N),z=l(t,{children:[i(x)||i(h)?l("div",{className:`flex min-w-0 flex-1 flex-col ${d[n]}`,children:[i(x)?e("div",{className:`neba-title font-semibold ${f[n]}`,children:x}):null,i(h)?e("div",{className:`text-(--neba-muted-fg) ${o[n]}`,children:h}):null]}):null,i(N)?e("div",{className:"ml-auto shrink-0",children:N}):null]}),A=[B?{key:"header",className:"flex items-start gap-3",content:z}:null,i(v)?{key:"content",className:c[n],content:v}:null,i(p)?{key:"footer",className:`flex flex-wrap items-center gap-2 ${c[n]}`,content:p}:null].filter(e=>null!==e);return e(a,{ref:j,size:n,density:u,padded:!1,className:["flex flex-col",$?"":`${g} ${m[n]}`,b??""].filter(Boolean).join(" "),...y,children:A.map((l,t)=>e("div",{className:[w,l.className,$&&t>0?"border-t [border-color:var(--n-line)]":""].filter(Boolean).join(" "),children:l.content},l.key))})});

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

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

package/dist/components/card/index.js

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

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Checkbox as BaseUICheckbox } from '@base-ui/react/checkbox';
+import type { NebaColor, NebaSize } from '../../types';
+/**
+ * Base UI's own props, minus the ones this component owns: `className` and
+ * `style` land on the field wrapper rather than on the tick, and `render` would
+ * replace the tick with something that is no longer a checkbox.
+ */
+type BaseCheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUICheckbox.Root>, 'className' | 'style' | 'render' | 'children'>;
+export interface CheckboxProps extends BaseCheckboxProps {
+    /** @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** The text beside the tick. Wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text under the label. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the checkbox invalid. */
+    error?: React.ReactNode;
+    /**
+     * Forces the invalid state without a message — for when an external form
+     * library owns the validity. Defaults to whether `error` has content.
+     */
+    invalid?: boolean;
+    /** Class names for the field wrapper, not for the tick itself. */
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A single yes/no, or one member of a set of them.
+ *
+ * `label`, `description` and `error` are props rather than children for the same
+ * reason they are on TextField: the arrangement is fixed and what a caller wants
+ * to decide is what goes in each slot. `children` is not accepted at all —
+ * anything a checkbox has to say belongs in one of the three.
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Checkbox as r}from"@base-ui/react/checkbox";import{Field as l}from"@base-ui/react/field";import{controlTextClasses as i,metaTextClasses as o,surfaceClasses as t,tickRadiusClasses as s,tickSizeClasses as d,transitionClasses as c}from"../../internal/styles";const b=["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",c,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),h=[t,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","[box-shadow:var(--neba-plate-glass)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:[box-shadow:var(--neba-plate-solid)]","data-[checked]:hover:bg-(--n-fill-hover)","data-[indeterminate]:bg-(--n-fill) data-[indeterminate]:text-(--n-on-solid)","data-[indeterminate]:[border-color:transparent]"].join(" "),f=[t,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),v=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)]","text-(--neba-disabled-fg) shadow-none","data-[checked]:bg-(--neba-disabled-bg)","data-[indeterminate]:bg-(--neba-disabled-bg)"].join(" ");function m(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function p(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const Checkbox=n.forwardRef(function({size:n="md",color:t="primary",label:c,description:u,error:g,invalid:x,disabled:k=!1,readOnly:j=!1,className:N,style:w,...$},y){const z=null!=g&&!1!==g&&""!==g,C=x??z,L=C?"danger":t,B={"--n-fill":`var(--neba-${L}-fill)`,"--n-fill-hover":`var(--neba-${L}-fill-hover)`,"--n-on-solid":`var(--neba-${L}-on-solid)`,"--n-accent":`var(--neba-${L}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${L}-line)`,"--n-line-hover":`var(--neba-${L}-line-hover)`,"--n-ring":`var(--neba-${L}-ring)`},R=[b,d[n],s[n],k?v:j?f:h].join(" ");return a(l.Root,{disabled:k,invalid:C,className:["inline-flex flex-col gap-1 align-top",N??""].filter(Boolean).join(" "),style:{...B,...w},children:[a("div",{className:`flex items-start gap-2 ${i[n]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(r.Root,{ref:y,className:R,disabled:k,readOnly:j,...$,children:e(r.Indicator,{className:"flex size-[70%] items-center justify-center",children:$.indeterminate?e(p,{}):e(m,{})})})}),c||u?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[c?e(l.Label,{className:["leading-[1.4]",k?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)"].join(" "),children:c}):null,u?e(l.Description,{className:`${o[n]} text-(--neba-muted-fg)`,children:u}):null]}):null]}),z?e(l.Error,{match:!0,className:`${o[n]} text-(--n-accent)`,children:g}):null]})});

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

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

package/dist/components/checkbox/index.js

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

package/dist/components/chip/Chip.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+export interface ChipProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` (the default) is flat. A chip is a token sitting on
+     * something else, so this is raised even less often than on a Button.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /** Content placed before the label — an icon, a status dot, an avatar. */
+    startIcon?: React.ReactNode;
+    /** Content placed after the label, before any `count`. */
+    endIcon?: React.ReactNode;
+    /**
+     * A number set into the end of the chip. Rendered on its own small plate, so
+     * "Errors 12" reads as one token with a count rather than as two words.
+     */
+    count?: React.ReactNode;
+    /**
+     * Called when the chip's delete affordance is pressed. Passing it is what
+     * makes the affordance appear.
+     */
+    onDelete?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Accessible name of the delete button. */
+    deleteLabel?: string;
+    /**
+     * Marks the chip as chosen — a filter that is on. `selected` deepens the
+     * surface a step rather than changing the colour family, so a row of chips
+     * stays one row of chips.
+     * @default false
+     */
+    selected?: boolean;
+    /** Unavailable. Drops the colour family for neutral grey, as everywhere else. */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * A compact token: a tag, a filter, a status, an entity plucked out of a list.
+ *
+ * The shell is always a `<span>`. What changes is what is inside it: a plain run
+ * of content, or — when `onClick` is given — a real `<button>` wrapping that
+ * content, plus a second button for `onDelete`. Both are reachable by keyboard,
+ * and neither is nested inside the other.
+ *
+ * An inert `<span>` carrying a click handler is the single most common way a
+ * component library loses its keyboard users, and a `<button>` inside a
+ * `<button>` is the most common way it invents a chip that Chrome silently
+ * rewrites. This shape is what avoids both.
+ */
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLElement>>;

package/dist/components/chip/Chip.js

@@ -0,0 +1 @@
+import{jsx as e,Fragment as n,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{CloseIcon as o}from"../../internal/icons";import{chipRemoveClasses as i,controlHeightClasses as r,controlSlots as s,controlTextClasses as a,disabledClasses as c,focusRingClasses as d,gapClasses as m,iconClasses as p,paddingXClasses as b,pressTransitionClasses as f,radiusClasses as u,surfaceClasses as h,transitionClasses as v}from"../../internal/styles";const x={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},g={solid:[h,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[h,"border text-(--n-accent) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--n-accent) bg-(--n-soft)"},j={solid:"bg-(--n-fill-active)",outline:"bg-(--n-panel-press) [border-color:var(--n-line-hover)]",text:"bg-(--n-soft-press)"},w={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)"},y=["relative inline-flex max-w-full shrink-0 select-none items-center","align-middle font-medium leading-none whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",v,f,p].join(" "),k=["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",d].join(" ");export const Chip=t.forwardRef(function({variant:t="outline",size:d="md",color:p="primary",density:f="default",elevation:h=0,startIcon:v,endIcon:N,count:C,onDelete:$,deleteLabel:B="Remove",selected:I=!1,disabled:R=!1,className:z,style:D,children:F,onClick:L,...q},A){const E=Boolean(L)&&!R,G=x[d],H=b[f][G],J=[y,r[G],a[G],m[G],u[G],R?c[t]:g[t],!R&&I?j[t]:"",E?w[t]:"",E?"ps-0":H,$?"pe-1":E?"pe-0":"",z??""].filter(Boolean).join(" "),K=l(n,{children:[v,null!=F&&!1!==F?e("span",{className:"min-w-0 truncate",children:F}):null,N,null!=C&&!1!==C?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===t?"bg-(--neba-glow-on-fill) text-(--n-on-solid)":"bg-(--n-soft-press) text-(--n-accent)"].join(" "),children:C}):null]});return l("span",{ref:A,className:J,style:{...s(p,h,t),...D},"aria-disabled":!(!R||E)||void 0,...q,children:[E?e("button",{type:"button","aria-pressed":I,className:`${k} ${m[G]} ${H}`,onClick:L,children:K}):K,$?e("button",{type:"button","aria-label":B,disabled:R,className:i,onClick:$,children:e(o,{})}):null]})});

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

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

package/dist/components/chip/index.js

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

package/dist/components/combobox/Combobox.d.ts

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+/**
+ * What a Combobox's value may be — the same two types a [Select](../select)
+ * submits, and for the same reason: a form control's value is what a form
+ * sends, and every escape from that buys flexibility by making the common case
+ * harder to write.
+ *
+ * A value the list does not contain is a `string`: it is what the user typed.
+ */
+export type ComboboxValue = string | number;
+export interface ComboboxOption {
+    /** Submitted, and what `value` / `onValueChange` speak in. */
+    value: ComboboxValue;
+    /**
+     * Shown in the list, in the input and on the chip. Defaults to the value.
+     *
+     * A `string` rather than a `ReactNode`, which is the one place this differs
+     * from Select: the label is typed against by the filter and written into a
+     * text input, and neither of those can be done to an element.
+     */
+    label?: string;
+    /** Unavailable, but still listed — the option exists, it just cannot be picked. */
+    disabled?: boolean;
+}
+/** One value, or an array of them, depending on `multiple`. */
+type Selection<Multiple extends boolean | undefined> = Multiple extends true ? ComboboxValue[] : ComboboxValue | null;
+export interface ComboboxProps<Multiple extends boolean | undefined = false> extends NebaStyleProps {
+    /**
+     * The options, as data — the same shape Select takes, and for the same
+     * reason: what a caller has is almost always an array already.
+     */
+    items: readonly ComboboxOption[];
+    /**
+     * Whether more than one value may be held. The chosen ones become chips
+     * inside the field, and the input goes on filtering after each.
+     * @default false
+     */
+    multiple?: Multiple;
+    /** The chosen value. Use with `onValueChange` for a controlled combobox. */
+    value?: Selection<Multiple> | null;
+    /** The initially chosen value, for an uncontrolled combobox. */
+    defaultValue?: Selection<Multiple> | null;
+    onValueChange?: (value: Selection<Multiple>) => void;
+    /** Called as the text in the input changes — the filter query, not the value. */
+    onInputValueChange?: (inputValue: string) => void;
+    /**
+     * Whether a value the list does not contain may be committed.
+     *
+     * On by default, and it is what separates this from a searchable Select: the
+     * typed text is offered as its own row at the end of the list, so committing
+     * it is a choice the user makes rather than something that happens to them on
+     * blur. Turn it off for a field whose values are a closed set.
+     * @default true
+     */
+    allowCustom?: boolean;
+    /** What that row says. Receives the trimmed query. */
+    customLabel?: (query: string) => React.ReactNode;
+    /**
+     * Shows a × that empties the field. Off by default — a field that can be
+     * cleared in one click is a field that can be emptied by accident.
+     * @default false
+     */
+    clearable?: boolean;
+    /** Shown in the popup when nothing matches and no value may be added. */
+    emptyMessage?: React.ReactNode;
+    /** The most rows the list will show at once. `-1` is all of them. @default -1 */
+    limit?: number;
+    /** Shown in the input while nothing is typed. */
+    placeholder?: string;
+    /**
+     * Drop shadow depth of the *field*. The popup has its own, fixed: it
+     * genuinely floats above the page, which is the one case elevation is for.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /** Label above the field, wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text below the field. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the combobox invalid. */
+    error?: React.ReactNode;
+    /** Forces the invalid state without a message. Defaults to `!!error`. */
+    invalid?: boolean;
+    /** Content placed before the input. Sized in `em`, so it tracks the text. */
+    startIcon?: React.ReactNode;
+    /** Stretches to the width of the container. */
+    fullWidth?: boolean;
+    /** Unavailable. */
+    disabled?: boolean;
+    /** The value is shown but cannot be changed. */
+    readOnly?: boolean;
+    /** Whether a value must be chosen before the form is submitted. */
+    required?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    /** The popup is open. Use with `onOpenChange` for a controlled popup. */
+    open?: boolean;
+    /** Whether the popup starts open. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible name of the clear button. */
+    clearLabel?: string;
+    /** Accessible name of a chip's remove button. Receives the chip's label. */
+    removeLabel?: (label: string) => string;
+    /** A ref to the text input the user types into. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A field you can type into and also choose from.
+ *
+ * The shell is a TextField's, wearing a chevron, exactly as Select's trigger is
+ * — the three have to be indistinguishable in a form or the form looks
+ * assembled rather than designed. What is different is what the text does: it
+ * filters the list, and — unless `allowCustom` is off — it can become the value
+ * itself, offered as the last row rather than committed silently on blur.
+ *
+ * With `multiple` the chosen values become [Chip](../../display/chip)s inside
+ * the field and the input goes on filtering after each one, so a set of tags is
+ * built without the field ever closing.
+ *
+ * Base UI owns everything hard about this: the filtering and its collator, the
+ * popup's positioning and flipping, the `combobox`/`listbox` wiring, arrow-key
+ * navigation across both the list and the chips, and the hidden input that
+ * makes the whole thing submit with a form.
+ */
+export declare function Combobox<Multiple extends boolean | undefined = false>({ variant, size, color, density, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, clearLabel, removeLabel, inputRef, id, className, style }: ComboboxProps<Multiple>): React.JSX.Element;
+export {};

package/dist/components/combobox/Combobox.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as n}from"@base-ui/react/combobox";import{Field as t}from"@base-ui/react/field";import{Chip as i}from"../chip/Chip";import{CheckIcon as r,ChevronIcon as o,CloseIcon as s,PlusIcon as c}from"../../internal/icons";import{chipRemoveClasses as d,controlHeightClasses as u,controlTextLeadingClasses as m,disabledClasses as p,fieldReadOnlyClasses as h,fieldRestClasses as b,focusWithinRingClasses as f,gapClasses as g,hasContent as x,iconClasses as v,metaTextClasses as y,paddingXClasses as N,radiusClasses as w,stackGapClasses as C,surfaceClasses as j,surfaceSlots as L,transitionClasses as I}from"../../internal/styles";const S=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",I,"focus-within:[transition-duration:0ms]",f,v].join(" "),$={xs:"min-h-5.5 py-0",sm:"min-h-6.5 py-[2px]",md:"min-h-8 py-[3px]",lg:"min-h-10 py-[4px]",xl:"min-h-12 py-[4px]"},O=[j,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]"].join(" "),V=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",I,"data-[highlighted]:bg-(--n-soft-hover)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" "),_=["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg)"].join(" ");function z(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function Combobox({variant:f="outline",size:v="md",color:j="primary",density:I="default",elevation:A=0,items:R,multiple:k,value:T,defaultValue:q,onValueChange:E,onInputValueChange:F,allowCustom:M=!0,customLabel:P,clearable:B=!1,emptyMessage:D="No matches",limit:G,placeholder:H,label:W,description:J,error:K,invalid:Q,startIcon:U,fullWidth:X=!1,disabled:Y=!1,readOnly:Z=!1,required:ee=!1,name:ae,open:le,defaultOpen:ne,onOpenChange:te,clearLabel:ie="Clear",removeLabel:re=e=>`Remove ${e}`,inputRef:oe,id:se,className:ce,style:de}){const ue=x(K),me=Q??ue,pe=me?"danger":j,he=!0===k,be=l.useMemo(()=>R.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[R]),[fe,ge]=l.useState(()=>z(q)),xe=void 0===T?fe:z(T),[ve,ye]=l.useState(""),Ne=l.useCallback(e=>be.find(a=>a.value===e)??{value:e,label:String(e),custom:!0},[be]),we=ve.trim(),Ce=we.toLocaleLowerCase(),je=""===we||be.some(e=>e.label.toLocaleLowerCase()===Ce||String(e.value).toLocaleLowerCase()===Ce)||xe.some(e=>String(e).toLocaleLowerCase()===Ce),Le=!M||Z||Y||je?null:we,Ie=l.useMemo(()=>null===Le?be:[...be,{value:Le,label:Le,custom:!0}],[be,Le]),Se=he?xe.map(Ne):xe.length>0?Ne(xe[0]):null;const $e=N[I][v],Oe=[S,m[v],w[v],g[v],he?$[v]:u[v],`${$e} pe-1.5`,Y?p[f]:Z?h[f]:b[f]].join(" "),Ve=["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed"].join(" "),_e=e(n.Input,{ref:oe,placeholder:H,className:he?`${Ve} min-w-16 h-[1lh]`:Ve});return a(t.Root,{disabled:Y,invalid:me,className:["flex-col align-top",C[v],X?"flex w-full":"inline-flex",ce??""].filter(Boolean).join(" "),style:{...L(pe,A),...de},children:[W?e(t.Label,{className:[y[v],"font-medium",Y?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:W}):null,a(n.Root,{id:se,name:ae,items:Ie,multiple:he,value:Se,onValueChange:e=>{!function(e){void 0===T&&ge(e),E?.(he?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{ye(e),F?.(e)},open:le,defaultOpen:ne,onOpenChange:e=>te?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:G,disabled:Y,readOnly:Z,required:ee,children:[a(n.InputGroup,{className:Oe,children:[U?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:U}):null,he?e(n.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(n.Value,{children:t=>a(l.Fragment,{children:[t.map(a=>e(n.Chip,{render:e(i,{variant:"outline",size:v,color:pe,density:"compact",disabled:Y,endIcon:Z||Y?null:e(n.ChipRemove,{"aria-label":re(a.label),className:d,children:e(s,{})})}),children:a.label},String(a.value))),_e]})})}):_e,B&&!Z?e(n.Clear,{"aria-label":ie,className:_,children:e(s,{})}):null,e(n.Trigger,{"aria-label":"string"==typeof W?void 0:"Open",className:_,children:e(n.Icon,{className:["flex items-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(o,{})})})]}),e(n.Portal,{children:e(n.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,children:a(n.Popup,{className:`${O} ${w[v]} ${m[v]}`,children:[e(n.Empty,{className:"px-2 py-1.5 text-(--neba-muted-fg) empty:hidden",children:D}),e(n.List,{children:t=>e(n.Item,{value:t,disabled:t.disabled,className:V,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--n-accent) [&_svg]:size-4",children:e(c,{})}),e("span",{className:"truncate",children:P?P(t.label):`Add “${t.label}”`})]}):a(l.Fragment,{children:[e(n.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),J?e(t.Description,{className:`${y[v]} text-(--neba-muted-fg)`,children:J}):null,ue?e(t.Error,{match:!0,className:`${y[v]} text-(--n-accent)`,children:K}):null]})}

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

@@ -0,0 +1,2 @@
+export { Combobox } from './Combobox';
+export type { ComboboxOption, ComboboxProps, ComboboxValue } from './Combobox';

package/dist/components/combobox/index.js

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

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
+import type { NebaStyleProps } from '../../types';
+/**
+ * A dialog takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant`: the three weights answer "how much does this surface
+ * assert itself against the page around it", and a modal has already taken the
+ * page. There is no `elevation` either — see `popupClasses`.
+ */
+export interface DialogProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'> {
+    /** The dialog is shown. Use with `onOpenChange` for a controlled dialog. */
+    open?: boolean;
+    /** Whether the dialog starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The element that opens the dialog, wired up by Base UI. Optional — a
+     * controlled dialog opened from somewhere else in the app needs no trigger at
+     * all, and passing one here is only a convenience for the common case.
+     */
+    trigger?: React.ReactElement;
+    /** The heading. Rendered as the `<h2>` that names the dialog. */
+    title?: React.ReactNode;
+    /** A line under the title, and the dialog's accessible description. */
+    description?: React.ReactNode;
+    /**
+     * The bottom row. Laid out end-aligned, so a pair of buttons needs no wrapper
+     * of its own — and `DialogClose` is what makes one of them dismiss.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Draws a hairline between the header, the body and the actions instead of
+     * separating them with space. Worth turning on the moment the body scrolls:
+     * the lines are what say the header stayed put.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Shows the × in the corner.
+     *
+     * On by default, unlike most booleans in the library. A modal dialog takes the
+     * page away until it is answered, and the visible way out should not have to
+     * be remembered.
+     * @default true
+     */
+    showClose?: boolean;
+    /** Accessible name of the × button. */
+    closeLabel?: string;
+    /**
+     * A hard cap on the sheet's width, overriding the one `size` implies. Numbers
+     * are pixels. For the dialog whose content decides its width — a wide table,
+     * a narrow confirmation — rather than for tuning the scale, which is `size`.
+     */
+    width?: number | string;
+    /**
+     * The sheet takes the full width its `size` allows.
+     *
+     * On by default, which is the other way round from every other component.
+     * Elsewhere `fullWidth` means "fill the container"; a dialog's container is
+     * the viewport, and a dialog that shrank to fit two words would be a tooltip.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /** Fills the viewport edge to edge. For a mobile-sized screen, or an editor. */
+    fullScreen?: boolean;
+    /**
+     * Whether the page behind is taken away. `'trap-focus'` keeps the page
+     * scrollable and clickable while still holding focus inside.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether pressing Escape or clicking outside closes the dialog. Turn it off
+     * for the dialog that has to be answered — and then give it actions that
+     * answer it, because there will be no other way out.
+     * @default true
+     */
+    dismissible?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export type DialogCloseProps = React.ComponentPropsWithoutRef<typeof BaseUIDialog.Close>;
+/**
+ * Closes the dialog it is inside.
+ *
+ * Exported because an uncontrolled dialog has no `setOpen` for its Cancel
+ * button to call, and the alternative — making every dialog controlled — is a
+ * piece of state per dialog that exists only to answer a button.
+ *
+ * `render` is Base UI's own escape hatch, so a real Neba button dismisses:
+ * `<DialogClose render={<Button variant="text">Cancel</Button>} />`.
+ */
+export declare const DialogClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A sheet that takes the page away until it is answered.
+ *
+ * The sections are props rather than compound sub-components, exactly as they
+ * are on Card: the arrangement of a dialog is fixed — heading, description,
+ * body, actions — and what a caller wants to decide is what goes in each slot.
+ * Base UI owns everything hard about it: the focus trap, the scroll lock, the
+ * `aria-labelledby` / `aria-describedby` wiring, restoring focus to the trigger,
+ * and the inert page behind.
+ *
+ * What is left here is the surface, the width ladder and the scroll behaviour —
+ * the header and the actions stay put while only the body scrolls, which is why
+ * `dividers` matters more here than on a Card.
+ */
+export declare function Dialog({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, style, children }: DialogProps): React.JSX.Element;

package/dist/components/dialog/Dialog.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as i}from"../box/Box";import{CloseIcon as o}from"../../internal/icons";import{hasContent as r,metaTextClasses as t,radiusClasses as s,sheetBodyClasses as d,sheetHeaderGapClasses as c,sheetSectionGapClasses as m,sheetTitleClasses as f,surfaceClasses as u,surfaceSlots as p}from"../../internal/styles";const x={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},b=[u,"relative flex w-full flex-col overflow-hidden","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),h=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),g="border-t [border-color:var(--n-line)]";export const DialogClose=l.Close;export function Dialog({size:u="md",color:v="primary",density:y="default",open:w,defaultOpen:j,onOpenChange:$,trigger:_,title:N,description:k,actions:C,dividers:z=!1,showClose:B=!0,closeLabel:D="Close",width:O,fullWidth:P=!0,fullScreen:T=!1,modal:W=!0,dismissible:L=!0,className:R,style:S,children:V}){const q=n[y][u],A=i[y][u],E=z?`${q} ${A}`:q,F=r(N)||r(k),G=r(C);return a(l.Root,{open:w,defaultOpen:j,modal:W,disablePointerDismissal:!L,onOpenChange:(e,a)=>{L||e||"escape-key"!==a.reason?$?.(e):a.cancel()},children:[_?e(l.Trigger,{render:_}):null,a(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${h}`}),e(l.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",T?"items-stretch":"items-center p-4"].join(" "),children:a(l.Popup,{className:[b,d[u],T?"h-full max-w-none rounded-none":`max-h-full ${s[u]} ${void 0===O?x[u]:""}`,T||P?"":"w-auto",z?"":`${A} ${m[u]}`,R??""].filter(Boolean).join(" "),style:{...p(v,3),...void 0===O?null:{maxWidth:"number"==typeof O?`${O}px`:O},...S},children:[F||B?a("div",{className:`flex shrink-0 items-start gap-3 ${E}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${c[u]}`,children:[r(N)?e(l.Title,{className:`font-semibold ${f[u]} m-0`,children:N}):null,r(k)?e(l.Description,{className:`m-0 text-(--neba-muted-fg) ${t[u]}`,children:k}):null]}),B?e(l.Close,{"aria-label":D,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(o,{})}):null]}):null,r(V)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",E,z&&(F||B)?g:""].filter(Boolean).join(" "),children:V}):null,G?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",E,z?g:""].filter(Boolean).join(" "),children:C}):null]})})]})]})}

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

@@ -0,0 +1,2 @@
+export { Dialog, DialogClose } from './Dialog';
+export type { DialogCloseProps, DialogProps } from './Dialog';

package/dist/components/dialog/index.js

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

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import type { NebaAlign, NebaColor, NebaOrientation, NebaSize } from '../../types';
+/** Where the label sits along a labelled divider. Ignored without a label. */
+export type DividerTextAlign = NebaAlign;
+export interface DividerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * Which way the line runs. A vertical divider has no height of its own — it
+     * stretches to its flex parent, the way a rule between two toolbar groups
+     * should.
+     * @default 'horizontal'
+     */
+    orientation?: NebaOrientation;
+    /**
+     * Semantic colour role. Only the hairline is coloured, and only faintly: this
+     * is the same `--n-line` a Card scores its sections with, so a standalone
+     * divider and a card's internal one are the same line.
+     * @default 'primary'
+     */
+    color?: NebaColor;
+    /** Type scale of the label. Nothing else on a divider has a size. */
+    size?: NebaSize;
+    /** A label set into the line — "OR" between two sign-in options. */
+    children?: React.ReactNode;
+    /**
+     * Where the label sits. `center` splits the line in half; `start` and `end`
+     * leave a short stub on the near side so the label still reads as set *into*
+     * the rule rather than floating above it.
+     * @default 'center'
+     */
+    textAlign?: DividerTextAlign;
+}
+/**
+ * A rule between two things.
+ *
+ * With no children it is Base UI's `Separator` and nothing else — a real
+ * `role="separator"` with the right `aria-orientation`. With children the line
+ * breaks around the label.
+ *
+ * `separator` is not a name-from-content role, so the visible label does *not*
+ * become the accessible name on its own: a screen reader would announce a bare
+ * "separator" and the word "OR" would be read as loose text somewhere nearby.
+ * A string label is therefore copied into `aria-label`. Anything richer is left
+ * alone — only the caller knows which part of it is the name.
+ *
+ * There is no `variant` and no `elevation`: a divider is not a surface. It has
+ * no acrylic, catches no light and casts no shadow.
+ */
+export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/divider/Divider.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as a}from"@base-ui/react/separator";import{metaTextClasses as l}from"../../internal/styles";const n="[border-color:var(--n-line)]",i={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},o={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const Divider=t.forwardRef(function({orientation:t="horizontal",color:s="primary",size:c="md",textAlign:f="center",className:m,style:d,children:h,...p},x){const u="vertical"===t,w={"--n-line":`var(--neba-${s}-line)`};if(!(null!=h&&!1!==h&&""!==h))return e(a,{ref:x,orientation:t,className:[u?"w-0 self-stretch border-l":"h-0 w-full border-t",n,m??""].filter(Boolean).join(" "),style:{...w,...d},...p});const[g,b]=i[t][f],v=u?"w-0 border-l":"h-0 border-t";return r(a,{ref:x,orientation:t,"aria-label":"string"==typeof h?h:void 0,className:["flex items-center",u?"w-auto flex-col self-stretch":"w-full",o[c],m??""].filter(Boolean).join(" "),style:{...w,...d},...p,children:[e("span",{"aria-hidden":"true",className:`${v} ${g} ${n}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--neba-muted-fg)",l[c],u?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:h}),e("span",{"aria-hidden":"true",className:`${v} ${b} ${n}`})]})});

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

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps, DividerTextAlign } from './Divider';

package/dist/components/divider/index.js

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

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

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+/** Why a file was turned away. One reason per file, in the order they are checked. */
+export type FileRejectionReason = 'type' | 'size' | 'count';
+export interface FileRejection {
+    file: File;
+    reason: FileRejectionReason;
+}
+export interface FilePickerProps extends NebaStyleProps {
+    /**
+     * Drop shadow depth. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * Which files the browser's own picker offers, in the `accept` grammar —
+     * `'image/*,.pdf'`. Dropped files are checked against it too, which the
+     * attribute alone does not do.
+     */
+    accept?: string;
+    /** Whether more than one file may be chosen. @default false */
+    multiple?: boolean;
+    /** The largest a single file may be, in bytes. */
+    maxSize?: number;
+    /**
+     * How many files may be held at once. Implies `multiple`, and is checked
+     * against what is already chosen rather than against one drop.
+     */
+    maxFiles?: number;
+    /** The chosen files. Use with `onFilesChange` for a controlled picker. */
+    value?: readonly File[];
+    /** The initially chosen files, for an uncontrolled one. */
+    defaultValue?: readonly File[];
+    onFilesChange?: (files: File[]) => void;
+    /**
+     * Called with everything that was turned away, and why. Without it a rejected
+     * file disappears silently, which is the single worst thing a dropzone does.
+     */
+    onReject?: (rejections: FileRejection[]) => void;
+    /** Label above the box. */
+    label?: React.ReactNode;
+    /** Helper text below the box. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the picker invalid. */
+    error?: React.ReactNode;
+    /** Forces the invalid state without a message. Defaults to `!!error`. */
+    invalid?: boolean;
+    /** The line inside the box. Defaults to an English sentence. */
+    title?: React.ReactNode;
+    /** The line under it — what is accepted, how big, how many. */
+    hint?: React.ReactNode;
+    /** The glyph above the title. Pass `null` for a box with no picture in it. */
+    icon?: React.ReactNode;
+    /**
+     * Lists the chosen files under the box, each with a way to remove it.
+     * @default true
+     */
+    showList?: boolean;
+    /** Accessible name of a file's remove button. Receives the file's name. */
+    removeLabel?: (name: string) => string;
+    /** Stretches to the width of the container. @default true */
+    fullWidth?: boolean;
+    /** Unavailable. */
+    disabled?: boolean;
+    /** The files are shown but cannot be added to or removed. */
+    readOnly?: boolean;
+    /** Whether a file must be chosen before the form is submitted. */
+    required?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * `1.4 MB`, in the units a person reading a file list expects.
+ *
+ * Base 1000 rather than 1024, and `MB` rather than `MiB`: it is the number every
+ * operating system's file browser shows, and a picker that disagrees with the
+ * Finder about how big the file is has picked a fight it cannot win.
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * A box you drop files on, or click to open the file dialog.
+ *
+ * There is no Base UI primitive under this, and the fallback the library allows
+ * — plain React and DOM — is the right one: a dropzone is a `<div>` listening
+ * for four drag events and an `<input type="file">` it clicks for you. There is
+ * no popup to position, no focus to trap and no roving anything.
+ *
+ * What that leaves is the part every hand-rolled dropzone gets wrong. The drag
+ * counter is one of them: `dragenter` and `dragleave` both fire as the pointer
+ * crosses a *child* of the zone, so a zone that toggles a boolean flickers the
+ * whole time a file is being dragged across its own contents. Counting them is
+ * the fix. The other is `accept`, which the browser enforces on its own dialog
+ * and never on a drop, so a dropzone that only sets the attribute accepts
+ * anything the moment a file arrives by drag.
+ *
+ * The shell is a `<div>` and the pressable area inside it is a real `<button>`,
+ * with the file list outside that button — the same shape Chip and ListItem
+ * use, because the remove buttons cannot be nested inside the browse button.
+ */
+export declare const FilePicker: React.ForwardRefExoticComponent<FilePickerProps & React.RefAttributes<HTMLInputElement>>;