neba 1.1.0 → 1.3.0

package/dist/components/chat-bubble/ChatBubble.d.ts

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import type { NebaColor, NebaDensity, NebaElevation, NebaSize, NebaVariant } from '../../types';
+/**
+ * Whose message this is.
+ *
+ * `start` and `end` rather than `them`/`me` or `left`/`right`: a thread runs the
+ * way the language does, and the same two words already mean this everywhere
+ * else in the library. `start` is the default because a message from someone
+ * else is the one you have no other way of knowing about.
+ */
+export type ChatBubbleSide = 'start' | 'end';
+/**
+ * How far a message has got.
+ *
+ * The four steps are a ladder and the fifth is not on it: `failed` is the
+ * message that did not go, which is why it is the only one drawn in another
+ * colour family.
+ */
+export type ChatBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+/** What a link inside a message unfurls to. */
+export interface ChatBubbleLinkPreview {
+    /** Where the card goes. */
+    url: string;
+    /** The page's title. */
+    title?: React.ReactNode;
+    /** Its summary, clamped to two lines. */
+    description?: React.ReactNode;
+    /** The share image, drawn across the top of the card. */
+    image?: string;
+    /** Who published it — a domain, a site name. */
+    site?: React.ReactNode;
+    /** Opens the card in a new tab. @default false */
+    newTab?: boolean;
+}
+export interface ChatBubbleProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * Whose message this is.
+     * @default 'start'
+     */
+    side?: ChatBubbleSide;
+    /** Who sent it, above the bubble. */
+    name?: React.ReactNode;
+    /** When it was sent, beside the name. */
+    time?: React.ReactNode;
+    /**
+     * The sender's picture — an [Avatar](../display/avatar), at the size the
+     * thread uses. Left out, the bubble takes the whole row.
+     */
+    avatar?: React.ReactNode;
+    /**
+     * How far the message has got, drawn as a mark under the bubble. Left out,
+     * nothing is drawn — a received message has no delivery state worth showing.
+     */
+    status?: ChatBubbleStatus;
+    /** Overrides the word the mark is read out as. */
+    statusLabel?: string;
+    /**
+     * Draws the three dots instead of the message. What `children` holds is left
+     * alone, so the same bubble can go back to it when the message arrives.
+     * @default false
+     */
+    typing?: boolean;
+    /**
+     * A picture, a video, a map — drawn edge to edge above the text, so the
+     * bubble's corners crop it.
+     */
+    media?: React.ReactNode;
+    /** A link in the message, unfurled into a card under the text. */
+    preview?: ChatBubbleLinkPreview;
+    /**
+     * The message's own actions — a [Menu](../inputs/menu) trigger, most of the
+     * time. Sits beside the bubble and stays out of the way until the row is
+     * hovered or something in it takes focus.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Which language the marks are read out in — a BCP 47 tag such as `ko`,
+     * `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     */
+    locale?: string;
+    /**
+     * Weight of the bubble's surface. `solid` is the usual way to tell your own
+     * messages from everyone else's; `side` deliberately does not decide this,
+     * because which end is filled is a decision about the product, not about the
+     * component.
+     * @default 'outline'
+     */
+    variant?: NebaVariant;
+    /** @default 'md' */
+    size?: NebaSize;
+    /** @default 'primary' */
+    color?: NebaColor;
+    /** Padding inside the bubble, and nothing else. @default 'default' */
+    density?: NebaDensity;
+    /** Drop shadow depth. `0` (the default) is flat. @default 0 */
+    elevation?: NebaElevation;
+    /** The message. */
+    children?: React.ReactNode;
+}
+/**
+ * One message in a conversation.
+ *
+ * Everything around the bubble is optional and nothing about it is fixed by
+ * `side`: the avatar, the sender's name, the time, the delivery mark, the media
+ * above the text and the link card below it are each drawn only when they are
+ * given something. What `side` decides is which way the row runs and which
+ * corner of the sheet is cut short.
+ *
+ * `variant` is what tells your own messages from everyone else's, and it is
+ * deliberately not tied to `side` — filling the right-hand column is a
+ * convention, not a law, and a thread that fills neither is a perfectly good
+ * thread.
+ */
+export declare const ChatBubble: React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/chat-bubble/ChatBubble.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{useMessages as a}from"../../internal/i18n";import{CheckIcon as l,ClockIcon as i,LinkIcon as t,severityIcons as o}from"../../internal/icons";import{controlSlots as s,hasContent as c,metaTextClasses as d,radiusClasses as m,sheetBodyClasses as p,sheetHeaderGapClasses as u,srOnlyClasses as b,surfaceClasses as f,transitionClasses as v}from"../../internal/styles";const x={default:{xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},compact:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-1.5",xl:"px-3.5 py-2"}},h={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},g={solid:[f,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[f,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-(--n-soft) [box-shadow:var(--n-elev)]"};function y(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const w={sending:e(i,{}),sent:e(l,{}),delivered:e(y,{}),read:e(y,{}),failed:o.danger},N={sending:"text-(--neba-muted-fg)",sent:"text-(--neba-muted-fg)",delivered:"text-(--neba-muted-fg)",read:"text-(--n-accent)",failed:"text-(--neba-danger-accent)"},k=["block overflow-hidden rounded-(--neba-radius-sm) border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","[transition-property:background-color] [transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),_=["shrink-0 opacity-0","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const ChatBubble=r.forwardRef(function({side:r="start",name:l,time:i,avatar:t,status:o,statusLabel:f,typing:y=!1,media:k,preview:L,actions:z,locale:B,variant:W="outline",size:M="md",color:R="primary",density:T="default",elevation:$=0,className:q,style:A,children:D,...E},F){const G=a(B),H="end"===r,I=c(l)||c(i),J=y||c(D)||Boolean(L),K=["flex min-w-0 flex-col overflow-hidden",m[M],h[r],g[W],v].join(" "),O=o?f??G.chat[o]:"";return n("div",{ref:F,className:["group/bubble flex w-full items-start gap-2",H?"flex-row-reverse":"",q??""].filter(Boolean).join(" "),style:{...s(R,$,W),...A},...E,children:[c(t)?e("div",{className:"shrink-0",children:t}):null,n("div",{className:["flex min-w-0 max-w-[min(100%,32rem)] flex-col",u[M],H?"items-end":"items-start"].join(" "),children:[I?n("div",{className:`flex items-baseline gap-2 ${d[M]}`,children:[c(l)?e("span",{className:"font-semibold",children:l}):null,c(i)?e("span",{className:"text-(--neba-muted-fg)",children:i}):null]}):null,n("div",{className:"flex min-w-0 items-center gap-1 "+(H?"flex-row-reverse":""),children:[n("div",{className:K,children:[c(k)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:k}):null,J?n("div",{className:[x[T][M],"flex min-w-0 flex-col gap-2",p[M]].join(" "),children:[y?e(j,{label:G.chat.typing}):c(D)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:D}):null,L?e(C,{preview:L}):null]}):null]}),c(z)?e("div",{className:_,children:z}):null]}),o?n("div",{className:["flex items-center gap-1",d[M],N[o],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[w[o],e("span",{className:b,children:O})]}):null]})]})});function j({label:r}){return n("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(n=>e("span",{"aria-hidden":"true",className:"neba-typing-dot size-[0.45em] rounded-full",style:{"--n-i":n}},n)),e("span",{className:b,children:r})]})}function C({preview:r}){const{url:a,title:l,description:i,image:o,site:s,newTab:d=!1}=r;return n("a",{href:a,target:d?"_blank":void 0,rel:d?"noopener noreferrer":void 0,className:k,children:[o?e("img",{src:o,alt:"",className:"block h-28 w-full object-cover"}):null,n("div",{className:"flex flex-col gap-0.5 p-2",children:[c(s)?n("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(t,{}),e("span",{className:"truncate",children:s})]}):null,c(l)?e("span",{className:"font-semibold",children:l}):null,c(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]})}

package/dist/components/chat-bubble/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatBubble } from './ChatBubble';
+export type { ChatBubbleLinkPreview, ChatBubbleProps, ChatBubbleSide, ChatBubbleStatus } from './ChatBubble';

package/dist/components/chat-bubble/index.js

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps } from '../../types';
+import type { NebaElevation, NebaStyleProps, NebaTransition } from '../../types';
 export interface ChipProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
     /**
      * Drop shadow depth. `0` (the default) is flat. A chip is a token sitting on
@@ -7,6 +7,12 @@ export interface ChipProps extends NebaStyleProps, Omit<React.ComponentPropsWith
      * @default 0
      */
     elevation?: NebaElevation;
+    /**
+     * An entrance animation, run once on mount: `transition="fade"`, or an object
+     * for the details. For a trigger, a replay or anything under your own
+     * control, wrap it in an `Animate*` component instead.
+     */
+    transition?: NebaTransition;
     /** Content placed before the label — an icon, a status dot, an avatar. */
     startIcon?: React.ReactNode;
     /** Content placed after the label, before any `count`. */

package/dist/components/chip/Chip.js

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

package/dist/components/color-picker/ColorPicker.d.ts

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import type { ColorFormat } from '../../internal/color';
+import type { NebaElevation, NebaStyleProps } from '../../types';
+/** The names for the parts of the picker that have no text on them. */
+export interface ColorPickerLabels {
+    /** The saturation/brightness square. */
+    area: string;
+    /** The hue rail beside it. */
+    hue: string;
+    /** The opacity rail, when `alpha` is on. */
+    alpha: string;
+    /** The field the value can be typed into. */
+    value: string;
+    /** The grid of ready-made colours. */
+    swatches: string;
+    /** The × that empties the control. */
+    clear: string;
+    /** What the trigger reads before anything has been chosen. */
+    empty: string;
+}
+export interface ColorPickerProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** The colour, as a CSS string. Pass it to drive the picker yourself. */
+    value?: string;
+    /** Where an uncontrolled picker starts. @default '#1a58d1' */
+    defaultValue?: string;
+    /** Called with the new colour, written in `format`. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Which notation the value is written in on the way out.
+     * @default 'hex'
+     */
+    format?: ColorFormat;
+    /**
+     * Offers an opacity rail, and lets the value carry a fourth channel.
+     * @default false
+     */
+    alpha?: boolean;
+    /**
+     * The ready-made colours under the panel. `false` draws none; an array of CSS
+     * colour strings replaces the built-in set.
+     */
+    swatches?: readonly string[] | false;
+    /**
+     * Draws the panel in the page instead of in a popup, with no trigger.
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * The field under the panel that the value can be typed into.
+     * @default true
+     */
+    editable?: boolean;
+    /** Label above the control. */
+    label?: React.ReactNode;
+    /** Helper text below it. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the control invalid. */
+    error?: React.ReactNode;
+    invalid?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /** Shows the colour and forbids changing it. @default false */
+    readOnly?: boolean;
+    /** Stretches the trigger to its container. @default false */
+    fullWidth?: boolean;
+    /** Offers the × that empties the control. @default false */
+    clearable?: boolean;
+    /** Submits with a form under this name. */
+    name?: string;
+    /** Whether the popup is open. Pass it to drive the popup yourself. */
+    open?: boolean;
+    /** Where an uncontrolled popup starts. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Which language the accessible names are written in — a BCP 47 tag such as
+     * `ko`, `pt-BR` or `zh-Hant`. Unsupported tags fall back to English.
+     */
+    locale?: string;
+    /** Overrides for those names, one at a time. */
+    labels?: Partial<ColorPickerLabels>;
+    /** Drop shadow depth on the trigger. `0` (the default) is flat. @default 0 */
+    elevation?: NebaElevation;
+}
+/**
+ * A colour, chosen by eye.
+ *
+ * A saturation square with a hue rail beside it — the arrangement every design
+ * tool has settled on, because it is the one that puts every colour of a hue
+ * within a single movement of the pointer. `alpha` adds a third rail, `format`
+ * decides which notation comes back out, and `swatches` puts the handful of
+ * colours a product actually uses one click away.
+ *
+ * The panel's state is HSV and it never leaves that model, which is what keeps
+ * the hue rail still while the pointer is in the black corner: through RGB,
+ * every shade of black is the same colour and the rail would snap to red.
+ *
+ * There is no colour library under this. The conversions are in
+ * `internal/color.ts`, which is a hundred lines of arithmetic — the whole
+ * reason the package still has one runtime dependency.
+ */
+export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/color-picker/ColorPicker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{defaultPickerLabels as l}from"../../internal/calendar";import{PickerShell as n}from"../../internal/picker";import{CheckIcon as t}from"../../internal/icons";import{useMessages as o}from"../../internal/i18n";import{checkerBackground as s,clamp as i,cssColor as d,defaultSwatches as h,formatColor as c,parseColor as u,readableInk as f}from"../../internal/color";import{controlTextClasses as p,cx as b,focusRingClasses as m,metaTextClasses as g,radiusClasses as v,stackGapClasses as x,surfaceSlots as y}from"../../internal/styles";const w={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},N={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},k={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},C={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},_={xs:10,sm:12,md:14,lg:16,xl:18},z=["relative overflow-hidden border","[border-color:var(--neba-border)]","[box-shadow:var(--neba-plate-glass)]"].join(" "),I=["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function T(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:i((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:i((e.clientY-a.top)/a.height,0,1)}}function j(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function A({hsv:r,alphaValue:l,onChange:n,text:o,onTextChange:h,withAlpha:p,swatches:x,editable:y,size:A,inert:D,labels:M}){const O=_[A],P=-O/2,V=d({h:r.h,s:100,v:100}),$=d(r),L=e=>({onPointerDown:a=>{D||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!D&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),S=(e,a,r,l)=>({role:"slider",tabIndex:D?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":D||void 0,onKeyDown:e=>{const a=j(e);!D&&a&&0!==a.x&&(e.preventDefault(),l(a.x))}});return a("div",{className:b("flex flex-col",w[A],C[A]),children:[e("div",{...L(e=>{const{x:a,y:t}=T(e);n({hsv:{h:r.h,s:100*a,v:100*(1-t)},alpha:l})}),role:"slider",tabIndex:D?-1:0,"aria-label":M.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":D||void 0,onKeyDown:e=>{const a=j(e);!D&&a&&(e.preventDefault(),n({hsv:{h:r.h,s:i(r.s+a.x,0,100),v:i(r.v+a.y,0,100)},alpha:l}))},className:b(z,N[A],v[A],m,D?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:V,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:I,style:{width:O,height:O,left:`${r.s}%`,top:100-r.v+"%",marginLeft:P,marginTop:P,backgroundColor:$}})}),e("div",{...L(e=>n({hsv:{...r,h:360*T(e).x},alpha:l})),...S(M.hue,r.h,360,e=>n({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l})),className:b(z,k[A],"rounded-full",m,D?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:I,style:{width:O,height:O,left:r.h/360*100+"%",top:"50%",marginLeft:P,marginTop:P,backgroundColor:V}})}),p?a("div",{...L(e=>n({hsv:r,alpha:T(e).x})),...S(M.alpha,100*l,100,e=>n({hsv:r,alpha:i(l+e/100,0,1)})),className:b(z,k[A],"rounded-full",m,D?"cursor-default":"cursor-pointer touch-none"),style:s,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${d(r,0)}, ${$})`}}),e("span",{className:I,style:{width:O,height:O,left:100*l+"%",top:"50%",marginLeft:P,marginTop:P,backgroundColor:d(r,l)}})]}):null,y?a("div",{className:b("flex items-center",C[A]),children:[e("span",{"aria-hidden":"true",className:b("shrink-0 rounded-full border","[border-color:var(--neba-border)]"),style:{width:O+6,height:O+6,...s},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:d(r,l)}})}),e("input",{type:"text",value:o,readOnly:D,spellCheck:!1,autoComplete:"off","aria-label":M.value,onChange:e=>h(e.target.value),className:b("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--neba-border)]",v.xs,g[A],"text-(--neba-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1")})]}):null,x&&x.length>0?e("div",{role:"group","aria-label":M.swatches,className:"grid grid-cols-8 gap-1",children:x.map(a=>{const o=u(a),s=null!==o&&c(o.hsv,o.alpha,"hex")===c(r,l,"hex");return e("button",{type:"button",disabled:D,"aria-label":a,"aria-pressed":s,onClick:()=>{o&&n(o)},className:b("flex aspect-square items-center justify-center rounded-full border","[border-color:color-mix(in_oklab,var(--neba-fg)_18%,transparent)]","[transition:box-shadow_var(--neba-duration)_var(--neba-ease)]",m,"[outline:none]",D?"cursor-default":"cursor-pointer hover:[box-shadow:var(--neba-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:a},children:s&&o?e("span",{style:{color:f(o.hsv)},children:e(t,{})}):null},a)})}):null]})}function D(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const M={h:217,s:87,v:82};export const ColorPicker=r.forwardRef(function({value:t,defaultValue:i="#1a58d1",onValueChange:f,format:m="hex",alpha:v=!1,swatches:w=h,inline:N=!1,editable:k=!0,label:C,description:_,error:z,invalid:I,required:T=!1,disabled:j=!1,readOnly:O=!1,fullWidth:P=!1,clearable:V=!1,name:$,open:L,defaultOpen:S=!1,onOpenChange:q,locale:K,labels:R,variant:B="outline",size:W="md",color:E="primary",density:U="default",elevation:X=0,className:Y,style:F,...G},H){const J=o(K),Q=r.useMemo(()=>({...J.color,...R}),[J,R]),[Z,ee]=r.useState(i),ae=t??Z,[re,le]=r.useState(S),ne=L??re,[te,oe]=r.useState(()=>u(ae)??{hsv:M,alpha:1}),[se,ie]=r.useState(()=>ae||""),de=c(te.hsv,v?te.alpha:1,m),he=""===ae;r.useEffect(()=>{const e=u(ae);e?c(e.hsv,v?e.alpha:1,m)!==de&&(ie(ae),oe(e)):ie(ae)},[ae,de,v,m]);const ce=(e,a)=>{oe(e);const r=c(e.hsv,v?e.alpha:1,m);ie(a??r),void 0===t&&ee(r),f?.(r)},ue=j||O,fe=e(A,{hsv:te.hsv,alphaValue:te.alpha,onChange:ce,text:se,onTextChange:e=>{ie(e);const a=u(e);a&&ce(a,e)},withAlpha:v,swatches:w,editable:k,size:W,inert:ue,labels:Q}),pe=$?e("input",{type:"hidden",name:$,value:he?"":de}):null;if(N){const r=I??Boolean(z)?"danger":E;return a("div",{ref:H,className:b("flex flex-col",x[W],Y),style:{...y(r,X),...F},...G,children:[C?e("span",{className:b(g[W],"font-medium",j?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:C}):null,fe,_?e("span",{className:b(g[W],"text-(--neba-muted-fg)"),children:_}):null,z?e("span",{className:b(g[W],"text-(--n-accent)"),children:z}):null,pe]})}return e("div",{ref:H,className:P?"w-full":"inline-block",...G,children:e(n,{variant:B,size:W,color:E,density:U,elevation:X,style:F,label:C,description:_,error:z,invalid:I,required:T,disabled:j,readOnly:O,fullWidth:P,className:Y,startIcon:e("span",{"aria-hidden":"true",className:b("block size-[1.15em] shrink-0 rounded-full border","[border-color:color-mix(in_oklab,var(--neba-fg)_18%,transparent)]"),style:s,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:he?"transparent":d(te.hsv,v?te.alpha:1)}})}),display:he?Q.empty:de,samples:D(m,v),empty:he,clearable:V,onClear:()=>{void 0===t&&ee(""),ie(""),f?.("")},open:ne,onOpenChange:e=>{void 0===L&&le(e),q?.(e)},labels:{...l,clear:Q.clear},hiddenValues:$?[{name:$,value:he?"":de}]:void 0,children:e("div",{className:p[W],children:fe})})})});

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { ColorPicker } from './ColorPicker';
+export type { ColorPickerLabels, ColorPickerProps } from './ColorPicker';

package/dist/components/color-picker/index.js

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

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
+import type { NebaSide, NebaStyleProps } from '../../types';
+/**
+ * How the panel relates to the page.
+ *
+ * - `overlay` — it is opened, it floats over the page on a scrim, it holds the
+ *   focus, and it is dismissed. The navigation drawer behind a hamburger, the
+ *   filter panel beside a table.
+ * - `inline` — it is part of the layout and the page is laid out around it. No
+ *   scrim, no portal, no focus trap, nothing to dismiss. The sidebar that is
+ *   simply there.
+ *
+ * A separate axis from `variant`, which already means the weight of a surface
+ * across the whole library and would be a second spelling of nothing.
+ */
+export type NebaDrawerMode = 'overlay' | 'inline';
+/**
+ * A drawer takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant`, for Dialog's reason: the three weights answer "how
+ * much does this surface assert itself against the page", and a panel that has
+ * taken an edge of the window has answered it. There is no `elevation` either —
+ * an `overlay` drawer floats and carries a shadow at level 3, an `inline` one is
+ * part of the layout and carries none, and neither is a decision worth offering.
+ */
+export interface DrawerProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'> {
+    /**
+     * Which edge the panel is attached to. Physical rather than logical, the way
+     * `NebaSide` is everywhere: a drawer along the top of the window is along the
+     * top in every writing direction.
+     * @default 'left'
+     */
+    side?: NebaSide;
+    /** @default 'overlay' */
+    mode?: NebaDrawerMode;
+    /** The drawer is shown. Use with `onOpenChange` for a controlled drawer. */
+    open?: boolean;
+    /**
+     * Whether the drawer starts open, for an uncontrolled one.
+     *
+     * Defaults to `false` in `overlay` mode and `true` in `inline` mode, because
+     * a fixed sidebar that had to be opened before it appeared would not be a
+     * fixed sidebar.
+     */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The element that opens the drawer, wired up by Base UI.
+     *
+     * `overlay` only. An `inline` drawer is not opened — it is in the layout —
+     * so a trigger there would have nothing to do and is not rendered.
+     */
+    trigger?: React.ReactElement;
+    /** The heading. Rendered as the element that names the drawer. */
+    title?: React.ReactNode;
+    /** A line under the title, and the drawer's accessible description. */
+    description?: React.ReactNode;
+    /**
+     * The bottom row, held against the foot of the panel while the body scrolls.
+     * Laid out end-aligned, so a pair of buttons needs no wrapper of its own —
+     * and `DrawerClose` is what makes one of them dismiss.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Draws a hairline between the header, the body and the actions instead of
+     * separating them with space. Worth turning on the moment the body scrolls:
+     * the lines are what say the header stayed put.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Shows the × in the corner. On in `overlay` mode, where the panel has taken
+     * the page and the way out should not have to be remembered; off in `inline`
+     * mode, where a × that closes a fixed sidebar with nothing to reopen it is a
+     * one-way door.
+     */
+    showClose?: boolean;
+    /** Accessible name of the × button. */
+    closeLabel?: string;
+    /**
+     * How far the panel reaches in from its edge: a **width** for `left` and
+     * `right`, a **height** for `top` and `bottom`. Numbers are pixels.
+     *
+     * Left alone, a side panel takes the width its `size` implies and a top or
+     * bottom panel is as tall as what is in it, up to 85% of the window.
+     */
+    extent?: number | string;
+    /**
+     * Rounds the two corners on the edge that faces the page — the top and bottom
+     * of a side panel, the inner pair of a top or bottom one. The corners against
+     * the window edge are always square, because a corner cut off something that
+     * has no visible end is a corner cut off nothing.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Whether the page behind is taken away. `'trap-focus'` keeps the page
+     * scrollable and clickable while still holding focus inside. `overlay` only.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether pressing Escape or clicking the scrim closes the drawer. Turn it off
+     * for the drawer that has to be answered — and then give it actions that
+     * answer it, because there will be no other way out. `overlay` only.
+     * @default true
+     */
+    dismissible?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export type DrawerCloseProps = React.ComponentPropsWithoutRef<typeof BaseUIDialog.Close>;
+/**
+ * Closes the drawer it is inside.
+ *
+ * Exported for `DialogClose`'s reason: an uncontrolled drawer has no `setOpen`
+ * for its Cancel button to call. It is an `overlay` drawer's button — an
+ * `inline` drawer is not a Base UI dialog and has nothing for this to talk to.
+ *
+ * `render` is Base UI's own escape hatch, so a real Neba button dismisses:
+ * `<DrawerClose render={<Button variant="text">Cancel</Button>} />`.
+ */
+export declare const DrawerClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A panel attached to one edge of the window.
+ *
+ * Two things in one component, because they are the same panel: `overlay` is the
+ * drawer you open — a scrim, a focus trap, Escape — and `inline` is the drawer
+ * that is simply part of the page. Everything else about them is identical,
+ * which is exactly why they should not be two components a caller has to switch
+ * between when a sidebar becomes a hamburger at a breakpoint.
+ *
+ * The sections are props rather than compound sub-components, as on Card and
+ * Dialog: the arrangement is fixed — heading, description, body, actions — and
+ * what a caller wants to decide is what goes in each slot. The body is the only
+ * part that scrolls, so the heading and the actions stay put.
+ *
+ * In `overlay` mode Base UI owns everything hard about it: the focus trap, the
+ * scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
+ * focus to the trigger, and the inert page behind.
+ */
+export declare function Drawer({ side, mode, size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, extent, rounded, modal, dismissible, className, style, children }: DrawerProps): React.JSX.Element | null;

package/dist/components/drawer/Drawer.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r,Fragment as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as o}from"../box/Box";import{CloseIcon as s}from"../../internal/icons";import{hasContent as i,metaTextClasses as d,sheetBodyClasses as t,sheetHeaderGapClasses as u,sheetSectionGapClasses as b,sheetTitleClasses as m,surfaceClasses as c,surfaceSlots as f}from"../../internal/styles";const x={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},p={left:{xs:"rounded-r-(--neba-radius-xs)",sm:"rounded-r-(--neba-radius-sm)",md:"rounded-r-(--neba-radius-md)",lg:"rounded-r-(--neba-radius-lg)",xl:"rounded-r-(--neba-radius-xl)"},right:{xs:"rounded-l-(--neba-radius-xs)",sm:"rounded-l-(--neba-radius-sm)",md:"rounded-l-(--neba-radius-md)",lg:"rounded-l-(--neba-radius-lg)",xl:"rounded-l-(--neba-radius-xl)"},top:{xs:"rounded-b-(--neba-radius-xs)",sm:"rounded-b-(--neba-radius-sm)",md:"rounded-b-(--neba-radius-md)",lg:"rounded-b-(--neba-radius-lg)",xl:"rounded-b-(--neba-radius-xl)"},bottom:{xs:"rounded-t-(--neba-radius-xs)",sm:"rounded-t-(--neba-radius-sm)",md:"rounded-t-(--neba-radius-md)",lg:"rounded-t-(--neba-radius-lg)",xl:"rounded-t-(--neba-radius-xl)"}},g={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},h={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},v=[c,"relative flex flex-col overflow-hidden","text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[outline:none]"].join(" "),y=["[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]",y].join(" "),j="border-t [border-color:var(--n-line)]",N=["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(" ");export const DrawerClose=l.Close;export function Drawer({side:c="left",mode:$="overlay",size:_="md",color:k="primary",density:C="default",open:z,defaultOpen:B,onOpenChange:D,trigger:O,title:P,description:T,actions:F,dividers:L=!1,showClose:R,closeLabel:V="Close",extent:q,rounded:A=!0,modal:E=!0,dismissible:G=!0,className:H,style:I,children:J}){const K="overlay"===$,M="left"===c||"right"===c,Q=R??K,S=n[C][_],U=o[C][_],W=L?`${S} ${U}`:S,X=i(P)||i(T),Y=i(F),Z=void 0===q?null:{[M?"width":"height"]:"number"==typeof q?`${q}px`:q},ee=[v,t[_],g[c],A?p[c][_]:"",K?"[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]":"[box-shadow:var(--neba-plate-glass)]",K?y:"",M?`h-full max-w-full ${void 0===q?x[_]:""}`:"w-full "+(void 0===q?"max-h-[85%]":""),L?"":`${U} ${b[_]}`,H??""].filter(Boolean).join(" "),re=K?l.Title:"h2",ae=K?l.Description:"p",le=r(a,{children:[X||Q?r("div",{className:`flex shrink-0 items-start gap-3 ${W}`,children:[r("div",{className:`flex min-w-0 flex-1 flex-col ${u[_]}`,children:[i(P)?e(re,{className:`m-0 font-semibold ${m[_]}`,children:P}):null,i(T)?e(ae,{className:`m-0 text-(--neba-muted-fg) ${d[_]}`,children:T}):null]}),Q?K?e(l.Close,{"aria-label":V,className:N,children:e(s,{})}):e("button",{type:"button","aria-label":V,className:N,onClick:()=>D?.(!1),children:e(s,{})}):null]}):null,i(J)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",W,L&&(X||Q)?j:"",L?"":"py-1 -my-1"].filter(Boolean).join(" "),children:J}):null,Y?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",W,L?j:""].filter(Boolean).join(" "),children:F}):null]});return K?r(l.Root,{open:z,defaultOpen:B,modal:E,disablePointerDismissal:!G,onOpenChange:(e,r)=>{G||e||"escape-key"!==r.reason?D?.(e):r.cancel()},children:[O?e(l.Trigger,{render:O}):null,r(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${w}`}),e(l.Viewport,{className:`neba-portal fixed inset-0 z-50 flex ${h[c]}`,children:e(l.Popup,{className:ee,style:{...f(k,3),...Z,...I},children:le})})]})]}):z??B??1?e("div",{className:ee,style:{...f(k,0),...Z,...I},children:le}):null}

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

@@ -0,0 +1,2 @@
+export { Drawer, DrawerClose } from './Drawer';
+export type { DrawerCloseProps, DrawerProps, NebaDrawerMode } from './Drawer';

package/dist/components/drawer/index.js

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaColor, NebaSize } from '../../types';
+import type { NebaColor, NebaSize, NebaTransition } 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
@@ -13,6 +13,13 @@ export interface IconProps extends Omit<React.ComponentPropsWithoutRef<'span'>,
      * *sizes*, not content the Icon merely wraps.
      */
     icon: React.ReactNode;
+    /**
+     * An entrance animation, run once on mount: `transition="fade"`, or an object
+     * for the details. `transition="rotate"` with `repeat="infinite"` is the one
+     * spin the design language allows on a glyph. For a trigger or a replay, wrap
+     * it in an `Animate*` component instead.
+     */
+    transition?: NebaTransition;
     /**
      * 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.

package/dist/components/icon/Icon.js

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

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