neba 1.0.0 → 1.1.0

package/dist/components/date-time-picker/DateTimePicker.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { type PickerLabels } from '../../internal/calendar';
+import { type PickerShellProps } from '../../internal/picker';
+import { type TimeUnit } from '../../internal/date';
+import type { NebaWeekday } from '../../types';
+export interface DateTimePickerProps extends PickerShellProps {
+    /** The chosen moment. Use with `onValueChange` for a controlled picker. */
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which month the calendar opens on when there is no value. */
+    defaultMonth?: Date;
+    /**
+     * The earliest moment that may be chosen. Unlike DatePicker's, this one is
+     * read at full precision: the day it falls on stays available and the clock
+     * columns block the hours before it.
+     */
+    minDate?: Date | null;
+    /** The latest moment that may be chosen, likewise at full precision. */
+    maxDate?: Date | null;
+    shouldDisableDate?: (date: Date) => boolean;
+    shouldDisableTime?: (value: Date, unit: TimeUnit) => boolean;
+    locale?: string;
+    weekStartsOn?: NebaWeekday;
+    /**
+     * How the trigger writes the chosen moment. Passed straight to `Intl`.
+     * @default { dateStyle: 'medium', timeStyle: 'short' }
+     */
+    format?: Intl.DateTimeFormatOptions;
+    /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
+    hour12?: boolean;
+    showSeconds?: boolean;
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+    placeholder?: React.ReactNode;
+    clearable?: boolean;
+    /** Offers the shortcut to this moment in the footer. @default true */
+    showNowButton?: boolean;
+    /**
+     * Closes the popup as soon as a day is chosen. `false` here and `true` on
+     * DatePicker, because a moment is a day *and* a time and closing on the first
+     * of the two would leave the second one unanswered.
+     * @default false
+     */
+    closeOnSelect?: boolean;
+    labels?: Partial<PickerLabels>;
+    /** Identifies the field when a form is submitted, as `YYYY-MM-DDTHH:MM`. */
+    name?: string;
+}
+/**
+ * A day and a time, in one popup.
+ *
+ * Not a DatePicker that grew a clock and not a TimePicker that grew a calendar:
+ * the two panels sit side by side at exactly the same height — seven rows of
+ * cells each, which is why the calendar's grid and the clock's columns share the
+ * `--n-cell` ladder — so the popup is one rectangle rather than two of different
+ * sizes pushed together.
+ *
+ * The bounds do more work here than anywhere else. `minDate` is read at full
+ * precision, so a minimum of 09:30 on the 27th leaves the 27th selectable in the
+ * calendar and greys out the morning in the clock. That is the behaviour a
+ * "not before now" rule needs, and it is the one a day-granular check cannot give.
+ */
+export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/date-time-picker/DateTimePicker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Button as o}from"../button/Button";import{Calendar as n,TimeGrid as a,usePickerLabels as s}from"../../internal/calendar";import{CalendarIcon as i}from"../../internal/icons";import{PickerDivider as r,PickerFooter as c,PickerShell as d}from"../../internal/picker";import{displaySamples as m,formatDate as u,isDayOutside as h,isHour12 as p,isValidDate as f,localeWeekStart as S,mergeDateAndTime as b,startOfDay as y,startOfMonth as D,timeUnitSpan as g,toISODateTime as v,today as x,withPlaceholder as C,withTime as w}from"../../internal/date";import{cx as k,gapClasses as z}from"../../internal/styles";export const DateTimePicker=l.forwardRef(function({value:O,defaultValue:T,onValueChange:j,open:N,defaultOpen:V,onOpenChange:B,defaultMonth:I,minDate:M,maxDate:R,shouldDisableDate:E,shouldDisableTime:F,locale:P,weekStartsOn:q,format:A={dateStyle:"medium",timeStyle:"short"},hour12:G,showSeconds:H=!1,hourStep:J=1,minuteStep:K=1,secondStep:L=1,placeholder:Q,clearable:U=!1,showNowButton:W=!0,closeOnSelect:X=!1,labels:Y,name:Z,size:$="md",color:_="primary",density:ee="default",readOnly:te=!1,disabled:le=!1,startIcon:oe,...ne},ae){const se=s(Y),ie=q??S(P),re=G??p(P),[ce,de]=l.useState(T??null),me=void 0!==O?O:ce,[ue,he]=l.useState(V??!1),pe=N??ue,[fe,Se]=l.useState(()=>D(f(me)?me:I??x()));l.useEffect(()=>{pe&&Se(D(f(me)?me:I??x()))},[pe]);const be=e=>{e&&(te||le)||(void 0===N&&he(e),B?.(e))},ye=e=>{void 0===O&&de(e),j?.(e)},De=l.useCallback((e,t)=>{const[l,o]=g(t,e),n=y(e).getTime();return!!(f(M)&&n+1e3*o<M.getTime())||(!!(f(R)&&n+1e3*l>R.getTime())||(F?.(e,t)??!1))},[M,R,F]),ge=new Date,ve=w(ge,{seconds:H?ge.getSeconds():0}),xe=h(ve,M,R)||(E?.(ve)??!1)||De(ve,"second"),Ce=C(m(P,A),Q);return e(d,{...ne,size:$,color:_,density:ee,readOnly:te,disabled:le,triggerRef:ae,startIcon:oe??e(i,{}),display:f(me)?u(me,P,A):Q??"",samples:Ce,empty:!f(me),clearable:U,onClear:()=>ye(null),open:pe,onOpenChange:be,labels:se,hiddenValues:Z?[{name:Z,value:f(me)?v(me,H):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:k("flex items-stretch",z[$]),children:[e(n,{size:$,color:_,locale:P,weekStartsOn:ie,month:fe,onMonthChange:Se,selected:[me],onSelect:e=>{const t=f(me)?b(e,me):y(e);ye(t),Se(D(t)),X&&be(!1)},minDate:M,maxDate:R,shouldDisableDate:E,labels:se,autoFocus:!0}),e(r,{}),e(a,{size:$,density:ee,locale:P,value:f(me)?me:null,referenceDate:f(me)?me:x(),onChange:ye,hour12:re,showSeconds:H,hourStep:J,minuteStep:K,secondStep:L,shouldDisableTime:De,labels:se})]}),t(c,{size:$,children:[U?e(o,{variant:"text",size:$,color:_,density:"compact",onClick:()=>{ye(null),be(!1)},children:se.clear}):null,W?e(o,{variant:"text",size:$,color:_,density:"compact",disabled:xe,onClick:()=>{ye(ve),Se(D(ve))},children:se.now}):null,e(o,{variant:"solid",size:$,color:_,density:"compact",onClick:()=>be(!1),children:se.done})]})]})})});

package/dist/components/date-time-picker/index.d.ts

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

package/dist/components/date-time-picker/index.js

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

package/dist/components/dialog/Dialog.js

@@ -1 +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]})})]})]})}
+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:"",z?"":"py-1 -my-1"].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/divider/Divider.d.ts

@@ -19,6 +19,25 @@ export interface DividerProps extends Omit<React.ComponentPropsWithoutRef<'div'>
     color?: NebaColor;
     /** Type scale of the label. Nothing else on a divider has a size. */
     size?: NebaSize;
+    /**
+     * How far the rule runs — the width of a horizontal divider, the height of a
+     * vertical one. A number is pixels; a string is any CSS length, so `'50%'`
+     * and `'12rem'` both work.
+     *
+     * `length` rather than `width`, because a divider is the one component whose
+     * long axis turns with `orientation`: a `width` that meant height half the
+     * time would be a worse name than a longer one.
+     *
+     * Left out, a horizontal divider is the full width of its container and a
+     * vertical one stretches to the height of the flex row it is in — which is
+     * what a rule between two things should do by default.
+     */
+    length?: number | string;
+    /**
+     * How thick the rule is. A number is pixels; a string is any CSS length.
+     * @default 1
+     */
+    thickness?: number | string;
     /** A label set into the line — "OR" between two sign-in options. */
     children?: React.ReactNode;
     /**

package/dist/components/divider/Divider.js

@@ -1 +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}`})]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as n}from"@base-ui/react/separator";import{metaTextClasses as l}from"../../internal/styles";const i="[border-color:var(--n-line)]";function a(e){return"number"==typeof e?`${e}px`:e}const o={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"]}},s={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:c="primary",size:d="md",length:f,thickness:h,textAlign:m="center",className:p,style:u,children:x,...w},b){const v="vertical"===t,g=null!=x&&!1!==x&&""!==x,$={"--n-line":`var(--neba-${c}-line)`,"--n-rule":a(h)??"1px"},y=a(f),j={...$,...void 0===y?null:v?{height:y}:{width:y},...u};if(!g)return e(n,{ref:b,orientation:t,className:[v?"w-0 border-l [border-left-width:var(--n-rule)] "+(void 0===y?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--n-rule)]",i,p??""].filter(Boolean).join(" "),style:j,...w});const[k,N]=o[t][m],z=v?"w-0 border-l [border-left-width:var(--n-rule)]":"h-0 border-t [border-top-width:var(--n-rule)]";return r(n,{ref:b,orientation:t,"aria-label":"string"==typeof x?x:void 0,className:["flex items-center",v?"w-auto flex-col "+(void 0===y?"self-stretch":""):"w-full",s[d],p??""].filter(Boolean).join(" "),style:j,...w,children:[e("span",{"aria-hidden":"true",className:`${z} ${k} ${i}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--neba-muted-fg)",l[d],v?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:x}),e("span",{"aria-hidden":"true",className:`${z} ${N} ${i}`})]})});

package/dist/components/grid/Grid.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAlignSelf, NebaResponsive } from '../../types';
+export interface GridProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many of the container's columns the item takes. Read against the
+     * container's `columns`, so `span={6}` is a half of the default twelve and a
+     * quarter of `columns={24}`.
+     *
+     * Responsive: `span={{ xs: 12, md: 6, lg: 4 }}` is full width on a phone,
+     * half from 48rem and a third from 64rem. Every entry applies from its own
+     * breakpoint up, so two of them usually describe a whole layout.
+     *
+     * A span wider than the row is clamped to the row rather than overflowing.
+     * @default the container's full width
+     */
+    span?: NebaResponsive<number>;
+    /**
+     * Columns left empty *before* the item — space pushed in ahead of it, not an
+     * absolute position in the row. First in a twelve-column row, `offset={4}`
+     * with `span={4}` is the middle third; after an item that already took four
+     * columns, the same offset skips four more and lands on the last third.
+     *
+     * Responsive in the same way `span` is.
+     * @default 0
+     */
+    offset?: NebaResponsive<number>;
+    /** Overrides the row's `alignItems` for this item alone. */
+    alignSelf?: NebaAlignSelf;
+    /**
+     * Renders something other than a `<div>`: `render={<li />}`,
+     * `render={<article />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * One cell of a `GridContainer`.
+ *
+ * It is a width and nothing else — no surface, no padding, no typography. What
+ * goes inside brings its own, which is the whole reason a grid cell and a Box
+ * are two components: wrapping something in a layout should not change how it
+ * looks, and a cell that drew a sheet would make `span` a visual decision.
+ *
+ * The column count it divides by is inherited from the container as a custom
+ * property, so a `<Grid>` with no `<GridContainer>` above it falls back to
+ * twelve rather than breaking — but it will be a plain block in a plain parent,
+ * which is not a layout. Always wrap.
+ */
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/grid/Grid.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignSelfClasses as n,offsetValue as o,responsiveSlots as t,spanValue as s}from"../../internal/grid";export const Grid=e.forwardRef(function({span:e,offset:a,alignSelf:i,render:f,className:l,style:c,children:d,...m},p){const u=["neba-grid-item",i?n[i]:"",l??""].filter(Boolean).join(" ");return r({render:f,ref:p,props:{className:u,style:{...t("span",e,s),...t("offset",a,o),...c},children:d,...m}})});

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

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

package/dist/components/grid/index.js

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

package/dist/components/grid-container/GridContainer.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { NebaAlignItems, NebaDensity, NebaJustifyContent, NebaResponsive, NebaSize } from '../../types';
+export interface GridContainerProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many columns a row is divided into. Every `span` and every `offset`
+     * inside is read against this number, so `columns={24}` makes `span={12}` a
+     * half and not a full width.
+     * @default 12
+     */
+    columns?: NebaResponsive<number>;
+    /**
+     * The gutter between items, on Tailwind's spacing scale — `spacing={4}` is
+     * `1rem`, the same length `gap-4` is. Fractions are allowed, so `1.5` is
+     * `0.375rem`.
+     * @default 2
+     */
+    spacing?: NebaResponsive<number>;
+    /** The gutter between rows only. Falls back to `spacing`. */
+    rowSpacing?: NebaResponsive<number>;
+    /** The gutter between columns only. Falls back to `spacing`. */
+    columnSpacing?: NebaResponsive<number>;
+    /** How a row distributes the space its items did not use. */
+    justifyContent?: NebaJustifyContent;
+    /** How items sit against each other across the row. @default 'stretch' */
+    alignItems?: NebaAlignItems;
+    /** Where the rows sit when the grid is shorter than the box holding it. */
+    alignContent?: NebaJustifyContent;
+    /**
+     * Whether a row that runs out of columns continues on the next one. Turning
+     * it off gives one row that overflows, which is what a horizontally
+     * scrolling strip wants.
+     * @default true
+     */
+    wrap?: boolean;
+    /**
+     * Inner padding, on the `size`/`density` scale. Turn it off when the grid is
+     * already inside something that pads — a Container, a Card, another grid.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * The padding scale. As on Box, this is the size of the *sheet* — it never
+     * touches a height or the type scale, and it has nothing to do with the
+     * gutters, which are `spacing`.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /** @default 'default' */
+    density?: NebaDensity;
+    /**
+     * Renders something other than a `<div>`: `render={<section />}`,
+     * `render={<ul />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * The parent every `Grid` needs.
+ *
+ * It owns the three numbers an item cannot know on its own — how many columns
+ * there are and how wide the two gutters are — and hands them down as inherited
+ * custom properties rather than through a React context. That is not a
+ * shortcut: the values are responsive, and a media query can change an
+ * inherited custom property without React hearing about it, so the column count
+ * an item lays itself out against is always the one that is on screen. A
+ * context would have to re-render the tree at every breakpoint to say the same
+ * thing.
+ *
+ * It deliberately does not take `variant`, `color` or `elevation`. A grid is
+ * not a surface — it is the arrangement of the surfaces inside it, and the
+ * moment it draws its own sheet it stops being usable as the outermost thing on
+ * a page. Wrap it in a Box or a Card when the sheet is wanted.
+ *
+ * Nesting is a `GridContainer` inside a `Grid`, not a `Grid` that is also a
+ * container: the inner grid re-declares the column count for its own subtree
+ * while the item around it keeps the width the outer grid gave it.
+ */
+export declare const GridContainer: React.ForwardRefExoticComponent<GridContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/grid-container/GridContainer.js

@@ -0,0 +1 @@
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignContentClasses as n,alignItemsClasses as a,columnCount as o,justifyContentClasses as t,responsiveSlots as i,spacingValue as p,withBaseline as s}from"../../internal/grid";import{boxPaddingClasses as l}from"../box/Box";export const GridContainer=e.forwardRef(function({columns:e,spacing:c,rowSpacing:d,columnSpacing:f,justifyContent:m,alignItems:g,alignContent:x,wrap:u=!0,padded:y=!0,size:w="md",density:b="default",render:C,className:h,style:j,children:B,...N},S){const z=["neba-grid flex",u?"flex-wrap":"flex-nowrap","gap-x-(--n-gap-x) gap-y-(--n-gap-y)",y?l[b][w]:"",m?t[m]:"",g?a[g]:"",x?n[x]:"",h??""].filter(Boolean).join(" ");return r({render:C,ref:S,props:{className:z,style:{...i("cols",s(e,12),o),...i("gap-x",s(f??c,2),p),...i("gap-y",s(d??c,2),p),...j},children:B,...N}})});

package/dist/components/grid-container/index.d.ts

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

package/dist/components/grid-container/index.js

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

package/dist/components/highlight/Highlight.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import type { TypographyWeight } from '../typography/Typography';
+import type { NebaColor, NebaVariant } from '../../types';
+export interface HighlightProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * What to find.
+     *
+     * A string is one term, an array is several — the longest is tried first, so
+     * `['data', 'database']` marks the whole word rather than the first four
+     * letters of it. A `RegExp` is used as written, with the global flag forced
+     * on; `caseSensitive` and `wholeWord` are ignored for it, because a regular
+     * expression already says both of those things itself.
+     */
+    query: string | string[] | RegExp;
+    /**
+     * Weight of the mark.
+     *
+     * - `solid` — filled, the highlighter pen. The default.
+     * - `outline` — a hairline box around the word, for a page where a filled run
+     *   would be too much.
+     * - `text` — the accent colour and nothing else, for marking a word inside a
+     *   heading that is already loud.
+     * @default 'solid'
+     */
+    variant?: NebaVariant;
+    /**
+     * Semantic colour role. `warning` by default, and not arbitrarily: it is the
+     * one family whose fill is light with dark ink on it, so a solid `warning`
+     * mark is a yellow highlighter over black text rather than a white word on a
+     * block of colour.
+     * @default 'warning'
+     */
+    color?: NebaColor;
+    /**
+     * Whether `a` and `A` are different letters.
+     * @default false
+     */
+    caseSensitive?: boolean;
+    /**
+     * Whether a term has to be a word on its own — `cat` marking "cat" but not
+     * "concatenate".
+     *
+     * A word here is a run of letters, digits and underscores in any script, so it
+     * means what it should for `café` and `naïve`. It means very little for Korean
+     * or Japanese, where a phrase is not delimited by spaces at all; that is a
+     * property of the writing system rather than of this prop, and is the reason
+     * it is off by default.
+     * @default false
+     */
+    wholeWord?: boolean;
+    /** Underlines the mark as well. Combines with every variant. */
+    underline?: boolean;
+    /**
+     * Sets the mark's weight. Omit it and the mark is the weight of the text
+     * around it — the surface is already saying "this one", and a bolded word
+     * inside a sentence changes the rhythm of the whole line.
+     */
+    weight?: TypographyWeight;
+    /**
+     * The text to search. Elements are walked into and left otherwise untouched,
+     * so a match inside a `<strong>` is still marked and the `<strong>` survives.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Marks the words a reader is looking for, inside text they were already
+ * reading.
+ *
+ * The component is the search, not just the styling: `query` is what a search
+ * box holds, and everything about *how* the matching is done — case, whole
+ * words, a regular expression — is a prop rather than something a caller has to
+ * pre-compute into a list of offsets.
+ *
+ * The mark is a real `<mark>`, which is the element for "text of relevance to
+ * the reader" and is announced as such. That has one consequence worth knowing:
+ * marking eleven words in a paragraph tells a screen reader that eleven things
+ * are important, which is a way of saying nothing. A highlight is for a handful
+ * of matches.
+ *
+ * Nothing here is stateful and nothing measures — the whole component is a pure
+ * function of `children` and `query`, so it re-marks on its own the moment the
+ * search box changes.
+ */
+export declare const Highlight: React.ForwardRefExoticComponent<HighlightProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/highlight/Highlight.js

@@ -0,0 +1 @@
+import{jsx as n}from"react/jsx-runtime";import*as e from"react";import{transitionClasses as t}from"../../internal/styles";const r={solid:"bg-(--n-fill) text-(--n-on-solid)",outline:"border bg-(--n-panel) text-(--n-accent) [border-color:var(--n-line)]",text:"bg-transparent text-(--n-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},l=/[\p{L}\p{N}_]/u;function i(n){return n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function a(n,e,t){const r=e>0?n[e-1]:"",o=t<n.length?n[t]:"";return!l.test(r)&&!l.test(o)}function s(n,e,t,r){e.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=e.exec(n));){if(""===l[0]){e.lastIndex+=1;continue}const s=l.index,c=s+l[0].length;t&&!a(n,s,c)||(s>i&&o.push(n.slice(i,s)),o.push(r(l[0],`${s}`)),i=c)}return 0===o.length?n:(i<n.length&&o.push(n.slice(i)),o)}function c(n,t,r,o){if("string"==typeof n)return s(n,t,r,o);if("number"==typeof n)return s(String(n),t,r,o);if(Array.isArray(n))return e.Children.map(n,n=>c(n,t,r,o));if(e.isValidElement(n)){const l=n.props.children;return void 0===l||"function"==typeof l?n:e.cloneElement(n,void 0,c(l,t,r,o))}return n}export const Highlight=e.forwardRef(function({query:l,variant:a="solid",color:s="warning",caseSensitive:u=!1,wholeWord:f=!1,underline:d=!1,weight:m,className:p,style:g,children:h,...b},x){const y=e.useMemo(()=>function(n,e){if(n instanceof RegExp)return n.global?n:new RegExp(n.source,`${n.flags}g`);const t=(Array.isArray(n)?n:[n]).map(n=>n.trim()).filter(Boolean).sort((n,e)=>e.length-n.length);return 0===t.length?null:new RegExp(t.map(i).join("|"),e?"gu":"giu")}(l,u),[l,u]),v=["rounded-[0.25rem] px-0.5 -mx-0.5","box-decoration-clone",r[a],d?"underline decoration-2 underline-offset-2":"",m?o[m]:"",t].filter(Boolean).join(" "),$=y?c(h,y,f,(e,t)=>n("mark",{className:v,children:e},t)):h;return n("span",{ref:x,className:p,style:{"--n-fill":`var(--neba-${s}-fill)`,"--n-on-solid":`var(--neba-${s}-on-solid)`,"--n-accent":`var(--neba-${s}-accent)`,"--n-panel":`var(--neba-${s}-panel)`,"--n-line":`var(--neba-${s}-line)`,...g},...b,children:$})});

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

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

package/dist/components/highlight/index.js

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

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { NebaColor, NebaSize } from '../../types';
+export interface IconProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * The glyph. An `<svg>` element, an `<img>`, a component from an icon set, or
+     * a character — whatever is passed is laid into a box of the right size and
+     * given a colour to inherit.
+     *
+     * It is a prop rather than `children` on purpose. An icon set hands you an
+     * element you did not draw, and the two things you always want to change about
+     * it — how big it is and what colour it is — are the two things you cannot
+     * reach once it is a child of something. As a prop it is content the Icon
+     * *sizes*, not content the Icon merely wraps.
+     */
+    icon: React.ReactNode;
+    /**
+     * The box the glyph is drawn in: 14, 16, 20, 24 and 28px. Its own ladder
+     * rather than the control heights, because an icon is not a control.
+     * @default 'md'
+     */
+    size?: NebaSize;
+    /**
+     * Semantic colour role, or `inherit` — the default — to take the colour of
+     * whatever the icon sits in.
+     *
+     * `inherit` is the default and not `primary`, which is the one place this prop
+     * deviates from every other component in the library. An icon is content, and
+     * the overwhelmingly common case is an icon inside something that has already
+     * decided what colour its content is: a Button's label, a muted caption, an
+     * Alert's own family. An Icon that arrived pre-dyed blue would have to be
+     * turned off again at every one of those.
+     * @default 'inherit'
+     */
+    color?: NebaColor | 'inherit';
+    /**
+     * What the icon says, for a reader who cannot see it.
+     *
+     * Without it the icon is hidden from the accessibility tree entirely, which is
+     * the right default: the overwhelming majority of icons sit next to a word
+     * that already says the same thing, and reading both out loud is worse than
+     * reading one. Pass this only when the glyph is carrying meaning on its own.
+     */
+    label?: string;
+}
+/**
+ * A glyph at a known size, in a known colour.
+ *
+ * The library draws no icons of its own beyond the handful its components need —
+ * an icon set is a font-sized decision that belongs to the app, not to the
+ * component library it installs. What this does is give whatever icon the app
+ * chose the same two axes everything else here has.
+ *
+ * The box is `inline-flex` with the glyph told to fill it, and `font-size` is
+ * set to the same length — so an `<svg>` with its own `width`, an `<svg>` sized
+ * in `em`, and a bare character all come out the same size. That is the whole
+ * component: a box, a length written twice, and a colour.
+ */
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/icon/Icon.js

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

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

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

package/dist/components/icon/index.js

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

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { type ButtonProps } from '../button/Button';
+export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'startIcon' | 'endIcon'> {
+    /**
+     * The glyph. Wrap it in an `Icon` when it needs a size of its own; passed bare
+     * it is sized in `em` against the button, exactly as a `startIcon` is.
+     */
+    icon: React.ReactNode;
+    /**
+     * What the button does, in words.
+     *
+     * Required, and the one prop here that is. A button whose whole label is a
+     * drawing has no accessible name at all, and "an icon button with no
+     * `aria-label`" is the single most common accessibility defect a component
+     * library ships. Making it required is the only fix that survives review.
+     */
+    label: string;
+}
+/**
+ * A round button with a glyph in it and nothing else.
+ *
+ * A [Button] with an icon and no children already goes square — the same height,
+ * the same width, the acrylic corners cut off it. This is the other shape: a
+ * disc.
+ *
+ * That disc is a deliberate exception to the house radius rule, which holds
+ * every corner just short of the 50% that would make a control a pill, because
+ * the flat run along the top and bottom edge is what still reads as a sheet with
+ * its corners cut. The rule is about *labelled* controls: the flat run is there
+ * for the line of text to sit on, and a glyph has no line of text. A circle with
+ * a single mark centred in it is a punched token rather than a moulded key, so
+ * it says the thing the rule exists to protect by a different route.
+ *
+ * Everything else is Button's, unchanged and on purpose: the variants, the
+ * elevation ladder, the pointer light, `loading`, `readOnly`, and the values a
+ * surrounding ButtonGroup sets. Two components that draw the same surface from
+ * two copies of the same table are two components that will eventually disagree.
+ */
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

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

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

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

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

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

package/dist/components/pagination/Pagination.js

@@ -1 +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 i}from"../../internal/icons";import{controlTextClasses as r,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:$=e=>`Page ${e}`,previousLabel:k="Previous page",nextLabel:C="Next page",firstLabel:P="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 i=s(1,Math.min(n,e)),r=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),r.length>0?r[0]-2:e-1);return[...i,...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]:[],...r]}(x,S,M,w),D=S<=1,G=S>=x,H=(t,a,i,r,l,o)=>e("li",{className:"flex",children:e(n,{variant:d,size:u,color:h,density:f,elevation:p,disabled:L||r,"aria-label":a,startIcon:e("span",{className:`flex items-center ${l}`,children:o}),onClick:()=>W(i)})},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",P,1,D,"rotate-180 rtl:rotate-0",e(m,{})):null,y?H("previous",k,S-1,D,"rotate-90 rtl:-rotate-90",e(i,{})):null,q.map((t,a)=>"number"==typeof t?e("li",{className:"flex",children:e(n,{variant:t===S?"solid":d,size:u,color:h,density:f,elevation:p,disabled:L,"aria-label":$(t),"aria-current":t===S?"page":void 0,className:"tabular-nums",onClick:()=>W(t),children:t})},t):e("li",{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--neba-muted-fg)",r[u],c[u]].join(" "),children:"…"},`${t}-${a}`)),y?H("next",C,S+1,G,"-rotate-90 rtl:rotate-90",e(i,{})):null,N?H("last",z,x,G,"rtl:rotate-180",e(m,{})):null]}),e("span",{className:o,"aria-live":"polite",children:`${$(S)} of ${x}`}),A]})});
+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/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>>;