neba 1.0.0 → 1.2.0

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/otp-field/OtpField.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+/**
+ * What may be typed into a slot.
+ *
+ * `numeric` is the default because that is what a texted code is, and it is also
+ * what puts a number pad in front of a phone. `any` accepts whatever the
+ * keyboard produces — for a licence key with punctuation in it.
+ */
+export type OtpFieldCharset = 'numeric' | 'alpha' | 'alphanumeric' | 'any';
+export interface OtpFieldProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'children'> {
+    /**
+     * Drop shadow depth. `0` (the default) is flat.
+     * @default 0
+     */
+    elevation?: NebaElevation;
+    /**
+     * How many characters the code has. Clamped to 2–12: a single box is a
+     * TextField, and past twelve the row stops fitting a phone.
+     * @default 6
+     */
+    length?: number;
+    /**
+     * What may be typed. Anything rejected is dropped rather than shown, and
+     * `onValueInvalid` reports it.
+     * @default 'numeric'
+     */
+    charset?: OtpFieldCharset;
+    /** Hides the characters, the way a password field does. @default false */
+    mask?: boolean;
+    /**
+     * Splits the row every `groupSize` slots with a separator. `3` on a six digit
+     * code gives the familiar two blocks of three.
+     */
+    groupSize?: number;
+    /** What is drawn between two groups. @default '–' */
+    separator?: React.ReactNode;
+    /** The code. Use with `onValueChange` for a controlled field. */
+    value?: string;
+    /** What it starts as, for an uncontrolled one. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fires once every slot is filled — the moment to verify the code. */
+    onComplete?: (value: string) => void;
+    /** Fires when typed or pasted text held characters the charset rejects. */
+    onValueInvalid?: (value: string) => void;
+    /** Submits the owning form as soon as the code is complete. @default false */
+    autoSubmit?: boolean;
+    /** Label above the row, wired to the slots by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text below the row. */
+    description?: React.ReactNode;
+    /** Error message below the row. Its presence also turns the field invalid. */
+    error?: React.ReactNode;
+    /**
+     * Forces the invalid state without a message — for when a form library owns
+     * the validity. Defaults to whether `error` has content.
+     */
+    invalid?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    /** The form must have a complete code before it submits. @default false */
+    required?: boolean;
+    /** Unavailable. Every slot stops answering. */
+    disabled?: boolean;
+    /** Readable and copyable, but not typeable. @default false */
+    readOnly?: boolean;
+    /** Puts the caret in the first slot on mount. @default false */
+    autoFocus?: boolean;
+}
+/**
+ * A row of one-character slots: a PIN, a texted verification code, an invite
+ * key.
+ *
+ * Base UI owns everything that makes this harder than it looks — one hidden
+ * value behind however many inputs, paste spread across the slots from wherever
+ * the caret was, backspace stepping back a box, a click landing on the first
+ * empty slot rather than the one under the pointer, and the autofill hook that
+ * lets a phone offer the code straight from the message.
+ *
+ * What is here is the ladder a slot is drawn on and the field shell it shares
+ * with TextField and Select — a slot is a field-shaped box, and a form holding
+ * both should not look like two form kits stacked on each other.
+ */
+export declare const OtpField: React.ForwardRefExoticComponent<OtpFieldProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

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

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

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

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/panes/Panes.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import type { NebaColor, NebaOrientation, NebaSize } from '../../types';
+/**
+ * A pane's share of the split, as a percentage of the container or as a CSS
+ * length.
+ *
+ * A bare number is a percentage — that is what a split is usually described in,
+ * and a percentage keeps its meaning when the window changes size. A string is
+ * an absolute length (`'240px'`, `'15rem'`, `'20%'`), which is what a sidebar
+ * with a minimum actually needs: "at least 200 pixels" does not survive being
+ * written down as a percentage of a width nobody knows yet.
+ */
+export type PaneSize = number | string;
+export interface PanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the panes run. `horizontal` puts them side by side with upright
+     * handles between them; `vertical` stacks them.
+     * @default 'horizontal'
+     */
+    orientation?: NebaOrientation;
+    /**
+     * Whether the handles between the panes can be dragged. Turn it off for a
+     * split that is a layout rather than a control.
+     * @default true
+     */
+    resizable?: boolean;
+    /** The colour family the handles light up in. @default 'primary' */
+    color?: NebaColor;
+    /** How thick a handle is, and how far it reaches. @default 'md' */
+    size?: NebaSize;
+    /** Fires with every pane's share, in percent, while a handle is dragged. */
+    onResize?: (sizes: number[]) => void;
+    /** Fires once, with the same shape, when the handle is let go. */
+    onResizeEnd?: (sizes: number[]) => void;
+    /** The Panes. Anything that is not a Pane is still laid out, but has no size. */
+    children?: React.ReactNode;
+}
+export interface PaneProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * The share this pane starts with. Panes with no `defaultSize` split whatever
+     * is left over equally.
+     */
+    defaultSize?: PaneSize;
+    /** How small it may be dragged. @default 0 */
+    minSize?: PaneSize;
+    /** How large it may be dragged. Unbounded when left out. */
+    maxSize?: PaneSize;
+    /** What is inside the pane. */
+    children?: React.ReactNode;
+}
+/**
+ * A set of panes with draggable handles between them.
+ *
+ * The panes are sized in **fractions**, written out as
+ * `flex-basis: calc((100% - gutters) * fraction)`. That is the one decision the
+ * rest of this file follows from: a split described in percentages survives the
+ * window being resized without a single line of JavaScript running, so the
+ * component measures itself only twice — once on mount, to turn a `'240px'`
+ * default into a fraction, and once at the start of each drag, to know what a
+ * pixel of pointer movement is worth.
+ *
+ * The handles are interleaved here rather than written by the caller, so the
+ * children of a Panes are just panes. That does mean the direct children have to
+ * *be* Panes: the constraints are read off their props, and a Pane wrapped in
+ * something else is a pane with no minimum.
+ */
+export declare const Panes: React.ForwardRefExoticComponent<PanesProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One region of a split.
+ *
+ * It carries no surface of its own on purpose: a Panes is layout, and the moment
+ * a pane drew a sheet it would stop being usable as the thing a Card, a Table or
+ * an editor is put inside. Put a Box or a Card in it when a surface is wanted.
+ *
+ * `defaultSize`, `minSize` and `maxSize` are read by the Panes around it rather
+ * than used here — a pane cannot know what "half" is, only the split can.
+ */
+export declare const Pane: React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/panes/Panes.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{cx as r,transitionClasses as o}from"../../internal/styles";const i=n.createContext({basis:null}),a={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},s={xs:4,sm:6,md:8,lg:10,xl:12};function l(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const o=Number(r[1]);if(!Number.isNaN(o))switch(r[2]){case"px":return o;case"%":return t*o/100;case"rem":return o*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return o*parseFloat(n&&getComputedStyle(n).fontSize||"16");default:return}}export const Panes=n.forwardRef(function({orientation:c="horizontal",resizable:u=!0,color:d="primary",size:m="md",onResize:f,onResizeEnd:p,className:h,style:g,children:v,...x},b){const y=n.Children.toArray(v).filter(n.isValidElement),z=y.length,w=n.useRef(null),S=n.useCallback(e=>{w.current=e,"function"==typeof b?b(e):b&&(b.current=e)},[b]),R=n.useRef([]);R.current=y.map(e=>e.props);const[C,E]=n.useState(null),N=C&&C.length===z?C:null,M=n.useRef(null);M.current=N;const L="horizontal"===c,$=s[m]*Math.max(0,z-1);function k(e){const t=w.current,n=M.current;if(!u||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(L?r.width:r.height)-$;if(o<=0)return null;const i=R.current[e],a=R.current[e+1],s=n[e]*o,c=s+n[e+1]*o,d=Math.max(l(i?.minSize,o,t)??0,c-(l(a?.maxSize,o,t)??c)),m=Math.min(l(i?.maxSize,o,t)??c,c-(l(a?.minSize,o,t)??0));return m<d?null:{root:t,current:n,extent:o,start:s,pair:c,resize(t){const r=Math.min(m,Math.max(d,s+t)),i=[...n];return i[e]=r/o,i[e+1]=(c-r)/o,E(i),f?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=w.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(L?t.width:t.height)-$;n<=0||E(t=>t&&t.length===z?t:function(e,t,n){const r=e.map(e=>l(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,s=r.map(e=>Math.max(0,e??a)),c=s.reduce((e,t)=>e+t,0);return c<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/c)}(R.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[z,L,$]);const A=r("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",a[m],o,"[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-0",u?r(L?"cursor-col-resize":"cursor-row-resize","hover:bg-(--n-soft) data-[dragging]:bg-(--n-soft)"):"");return e("div",{ref:S,className:r("flex h-full w-full",L?"flex-row":"flex-col","min-h-0 min-w-0",h),style:{"--n-accent":`var(--neba-${d}-accent)`,"--n-soft":`var(--neba-${d}-soft)`,"--n-ring":`var(--neba-${d}-ring)`,...g},...x,children:y.map((a,s)=>t(n.Fragment,{children:[s>0?e("div",{role:"separator","aria-orientation":L?"vertical":"horizontal","aria-valuenow":N?Math.round(100*N[s-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!u||void 0,tabIndex:u?0:-1,className:A,onPointerDown:e=>{0===e.button&&function(e,t){const n=k(e);if(!n)return;const r=t.currentTarget;r.setPointerCapture(t.pointerId),r.dataset.dragging="true";const o=document.body.style.userSelect;document.body.style.userSelect="none";const i=L?t.clientX:t.clientY,a=L&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=L?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,p?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(s-1,e)},onKeyDown:e=>{const t=L?"ArrowLeft":"ArrowUp",n=L?"ArrowRight":"ArrowDown";e.key!==t&&e.key!==n||(e.preventDefault(),function(e,t){const n=k(e);if(!n)return;const r=n.resize(t);p?.(r.map(e=>100*e))}(s-1,e.key===n?16:-16))},children:e("span",{"aria-hidden":"true",className:r("pointer-events-none bg-(--neba-border)",o,L?"h-full w-px":"h-px w-full",u?"group-hover/handle:bg-(--n-accent) group-focus-visible/handle:bg-(--n-accent) group-data-[dragging]/handle:bg-(--n-accent)":"")})}):null,e(i.Provider,{value:{basis:N?`calc((100% - ${$}px) * ${N[s].toFixed(6)})`:null},children:a})]},a.key??s))})});export const Pane=n.forwardRef(function({defaultSize:t,minSize:o,maxSize:a,className:s,style:l,children:c,...u},d){const{basis:m}=n.useContext(i);return e("div",{ref:d,className:r("relative min-h-0 min-w-0 overflow-auto",s),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:c})});

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

@@ -0,0 +1,2 @@
+export { Pane, Panes } from './Panes';
+export type { PaneProps, PaneSize, PanesProps } from './Panes';

package/dist/components/panes/index.js

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

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

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

package/dist/components/pill/Pill.js

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

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

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

package/dist/components/pill/index.js

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