neba 1.9.0 → 1.10.0

package/dist/components/text-field/TextField.d.ts

@@ -1,7 +1,16 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps } from '../../types.js';
+import type { NebaElevation, NebaFieldSlot, NebaSlots, NebaStyleProps } from '../../types.js';
 /** How the multiline control may be resized by the user. Ignored when single line. */
 export type TextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
+/**
+ * The parts a TextField draws behind its root.
+ *
+ * `shell` is the framed box the control sits in — the thing wearing the border,
+ * the fill and the focus ring. It is a part rather than an implementation
+ * detail because it, and not the `<input>`, is what a caller means by "the
+ * field" when they want to change its shape.
+ */
+export type TextFieldSlot = NebaFieldSlot | 'shell';
 /**
  * Native `<input>` attributes, minus the three that collide with the shared
  * vocabulary: `color` and `size` are Neba props here, and `onChange` is widened
@@ -57,6 +66,12 @@ export interface TextFieldProps extends NebaStyleProps, NativeControlProps {
     loading?: boolean;
     /** Stretches to the width of the container. */
     fullWidth?: boolean;
+    /**
+     * Class names for the parts behind the root. `className` is the root — the
+     * column that holds the label, the shell and the two lines under it — so the
+     * control itself is reached through `classNames.control`.
+     */
+    classNames?: NebaSlots<TextFieldSlot>;
     onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 }
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/dist/components/text-field/TextField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Field as r}from"@base-ui/react/field";import{Input as i}from"@base-ui/react/input";import{controlHeightClasses as l,controlTextLeadingClasses as a,cx as s,disabledClasses as o,fieldReadOnlyClasses as c,fieldRestClasses as d,focusWithinRingClasses as m,gapClasses as u,iconClasses as x,metaTextClasses as p,paddingXClasses as f,radiusClasses as h,stackGapClasses as g,surfaceSlots as b,transitionClasses as y}from"../../internal/styles.js";const $={xs:`${u.xs} ${h.xs} ${a.xs}`,sm:`${u.sm} ${h.sm} ${a.sm}`,md:`${u.md} ${h.md} ${a.md}`,lg:`${u.lg} ${h.lg} ${a.lg}`,xl:`${u.xl} ${h.xl} ${a.xl}`},v={xs:"min-h-5.5 py-[3px]",sm:"min-h-6.5 py-[4px]",md:"min-h-8 py-[5px]",lg:"min-h-10 py-[8px]",xl:"min-h-12 py-[10px]"},w={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},N=["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",y,"focus-within:[transition-duration:0ms]",m,x].join(" "),j=d,k=c;function z(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"animate-spin",children:[e("circle",{cx:"8",cy:"8",r:"6.5",stroke:"currentColor",strokeOpacity:"0.25",strokeWidth:"2"}),e("path",{d:"M14.5 8A6.5 6.5 0 0 0 8 1.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}export const TextField=/*@__PURE__*/n.forwardRef(function({variant:a="outline",size:c="md",color:d="primary",density:m="default",elevation:u=0,multiline:x=!1,rows:h=3,resize:y="vertical",label:C,description:D,error:O,invalid:R,startIcon:W,endIcon:I,loading:L=!1,fullWidth:T=!1,readOnly:A=!1,disabled:B=!1,type:E="text",className:F,style:M,...P},q){const G=null!=O&&!1!==O&&""!==O,H=R??G,J=H?"danger":d,K=n.useRef(null),Q=n.useCallback(e=>{K.current=e,"function"==typeof q?q(e):q&&(q.current=e)},[q]),S=s(N,$[c],x?`${v[c]} items-start`:`${l[c]} items-center`,f[m][c],B?o[a]:A?k[a]:j[a]),U=["min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",x?`block ${w[y]}`:"self-stretch"].join(" "),V="inline-flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)";return t(r.Root,{disabled:B,invalid:H,className:s("flex-col align-top",g[c],T?"flex w-full":"inline-flex",F??""),style:{...b(J,u),...M},children:[C?e(r.Label,{className:[p[c],"font-medium",B?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:C}):null,t("span",{className:S,onPointerDown:e=>{e.target!==e.currentTarget||B||(e.preventDefault(),K.current?.focus())},children:[W?e("span",{className:V,children:W}):null,e(i,{ref:Q,className:U,disabled:B,readOnly:A,"aria-busy":L||void 0,"data-loading":L||void 0,...x?{render:e("textarea",{rows:h})}:{type:E},...P}),L?e("span",{className:V,children:e(z,{})}):I?e("span",{className:V,children:I}):null]}),D?e(r.Description,{className:[p[c],"text-(--neba-muted-fg)"].join(" "),children:D}):null,e(r.Error,G?{match:!0,className:[p[c],"text-(--n-accent)"].join(" "),children:O}:{className:[p[c],"text-(--n-accent)"].join(" ")})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Field as r}from"@base-ui/react/field";import{Input as l}from"@base-ui/react/input";import{controlHeightClasses as i,controlTextLeadingClasses as a,cx as s,disabledClasses as o,fieldReadOnlyClasses as c,fieldRestClasses as d,focusWithinRingClasses as m,gapClasses as u,iconClasses as p,metaTextClasses as x,paddingXClasses as f,radiusClasses as h,stackGapClasses as b,surfaceSlots as g,transitionClasses as y}from"../../internal/styles.js";const $={xs:`${u.xs} ${h.xs} ${a.xs}`,sm:`${u.sm} ${h.sm} ${a.sm}`,md:`${u.md} ${h.md} ${a.md}`,lg:`${u.lg} ${h.lg} ${a.lg}`,xl:`${u.xl} ${h.xl} ${a.xl}`},N={xs:"min-h-5.5 py-[3px]",sm:"min-h-6.5 py-[4px]",md:"min-h-8 py-[5px]",lg:"min-h-10 py-[8px]",xl:"min-h-12 py-[10px]"},v={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},w=["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",y,"focus-within:[transition-duration:0ms]",m,p].join(" "),k=d,z=c;function j(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"animate-spin",children:[e("circle",{cx:"8",cy:"8",r:"6.5",stroke:"currentColor",strokeOpacity:"0.25",strokeWidth:"2"}),e("path",{d:"M14.5 8A6.5 6.5 0 0 0 8 1.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}export const TextField=/*@__PURE__*/n.forwardRef(function({variant:a="outline",size:c="md",color:d="primary",density:m="default",elevation:u=0,multiline:p=!1,rows:h=3,resize:y="vertical",label:C,description:D,error:O,invalid:R,startIcon:W,endIcon:I,loading:L=!1,fullWidth:T=!1,classNames:A,readOnly:B=!1,disabled:E=!1,type:F="text",className:M,style:P,...q},G){const H=null!=O&&!1!==O&&""!==O,J=R??H,K=J?"danger":d,Q=n.useRef(null),S=n.useCallback(e=>{Q.current=e,"function"==typeof G?G(e):G&&(G.current=e)},[G]),U=s(w,$[c],p?`${N[c]} items-start`:`${i[c]} items-center`,f[m][c],E?o[a]:B?z[a]:k[a],A?.shell),V=s("min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",p?`block ${v[y]}`:"self-stretch",A?.control),X="inline-flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)";return t(r.Root,{disabled:E,invalid:J,className:s("flex-col align-top",b[c],T?"flex w-full":"inline-flex",M??""),style:{...g(K,u),...P},children:[C?e(r.Label,{className:s(x[c],"font-medium",E?"text-(--neba-disabled-fg)":"text-(--neba-fg)",A?.label),children:C}):null,t("span",{className:U,onPointerDown:e=>{e.target!==e.currentTarget||E||(e.preventDefault(),Q.current?.focus())},children:[W?e("span",{className:X,children:W}):null,e(l,{ref:S,className:V,disabled:E,readOnly:B,"aria-busy":L||void 0,"data-loading":L||void 0,...p?{render:e("textarea",{rows:h})}:{type:F},...q}),L?e("span",{className:X,children:e(j,{})}):I?e("span",{className:X,children:I}):null]}),D?e(r.Description,{className:s(x[c],"text-(--neba-muted-fg)",A?.description),children:D}):null,e(r.Error,H?{match:!0,className:s(x[c],"text-(--n-accent)",A?.error),children:O}:{className:s(x[c],"text-(--n-accent)",A?.error)})]})});

package/dist/components/toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaAlign, NebaColor, NebaStyleProps, NebaVariant } from '../../types.js';
+import type { NebaAlign, NebaColor, NebaSlots, NebaStyleProps, NebaVariant } from '../../types.js';
 /**
  * Where the stack sits.
  *
@@ -50,6 +50,16 @@ export interface ToastOptions extends ToastData {
     /** Called once it has finished animating out and left the DOM. */
     onRemove?: () => void;
 }
+/**
+ * The parts the toast stack draws.
+ *
+ * There is no `className` on the provider and there is deliberately no `root`
+ * slot: a ToastProvider renders no element of its own — it wraps the app and
+ * puts a portalled stack on the page — so there is nothing for a root class
+ * name to land on. `viewport` is the strip the toasts are stacked in and
+ * `toast` is one of them.
+ */
+export type ToastSlot = 'viewport' | 'toast' | 'title' | 'description' | 'action' | 'close';
 export interface ToastProviderProps extends Pick<NebaStyleProps, 'variant' | 'size' | 'density'> {
     /** The default colour family. A single toast overrides it in `add`. */
     color?: NebaColor;
@@ -79,6 +89,11 @@ export interface ToastProviderProps extends Pick<NebaStyleProps, 'variant' | 'si
     locale?: string;
     /** Accessible name of every toast's × button. Defaults to the `locale`'s word. */
     closeLabel?: string;
+    /**
+     * Class names for the parts of the stack. There is no `className` here — a
+     * provider renders no element of its own to put one on.
+     */
+    classNames?: NebaSlots<ToastSlot>;
     children?: React.ReactNode;
 }
 /**
@@ -121,4 +136,4 @@ export declare function useToast(): {
  * limit, the swipe, the F6 focus hotkey, and the live region that makes a
  * message that appeared out of nowhere reach a screen reader at all.
  */
-export declare function ToastProvider({ variant, size, color, density, position, timeout, limit, width, locale, closeLabel, children }: ToastProviderProps): React.JSX.Element;
+export declare function ToastProvider({ variant, size, color, density, position, timeout, limit, width, locale, closeLabel, classNames, children }: ToastProviderProps): React.JSX.Element;

package/dist/components/toast/Toast.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as i}from"@base-ui/react/toast";import{boxPaddingClasses as n}from"../box/Box.js";import{actionMessages as s,useMessages as a}from"../../internal/i18n.js";import{CloseIcon as r,severityIcon as l}from"../../internal/icons.js";import{controlSlots as c,focusRingClasses as d,hasContent as m,iconClasses as u,metaTextClasses as p,radiusClasses as f,sheetBodyClasses as b,sheetHeaderGapClasses as x,sheetSectionGapClasses as v,sheetTitleClasses as h,surfaceClasses as y}from"../../internal/styles.js";const g={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 items-start flex-col-reverse","bottom-center":"bottom-0 items-center flex-col-reverse","bottom-end":"bottom-0 items-end flex-col-reverse"},w={solid:[y,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]"].join(" "),outline:[y,"border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" "),text:[y,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" ")},j={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"};function N(e){const{color:t,variant:o,icon:i,actionLabel:n,onAction:s,...a}=e;return{...a,data:{color:t,variant:o,icon:i},actionProps:void 0===n?void 0:{children:n,onClick:s}}}export function useToast(){const e=i.useToastManager();return o.useMemo(()=>({add:t=>e.add(N(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,N(o)),promise:(t,o)=>e.promise(t,{loading:N(o.loading),success:e=>N("function"==typeof o.success?o.success(e):o.success),error:e=>N("function"==typeof o.error?o.error(e):o.error)}),toasts:e.toasts}),[e])}function _({toast:o,variant:s,color:a,size:y,density:g,closeLabel:N,swipeDirection:_}){const T=o.data?.variant??s??"outline",z=o.data?.color??a,$=void 0===o.data?.icon?l(z):o.data.icon,k=j[T],D=m(o.title);return t(i.Root,{toast:o,swipeDirection:_,className:["pointer-events-auto flex w-full items-start",n[g??"default"][y],f[y],v[y],b[y],w[T],u,"[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",d,"[outline:none]"].filter(Boolean).join(" "),style:c(z,3,T),children:[m($)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${k}`,children:$}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${x[y]}`,children:[e(i.Title,{className:`neba-title font-semibold ${h[y]} ${k}`}),e(i.Description,{className:D?""+("solid"===T?"":"text-(--neba-muted-fg)"):""})]}),e(i.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",k||"text-(--n-on-solid)","hover:underline","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",p[y]].join(" ")}),e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(i.Close,{"aria-label":N,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(r,{})})})]})}function T(t){const{toasts:n}=i.useToastManager(),{position:s,width:a,...r}=t,l=o.useMemo(()=>[s.startsWith("top")?"up":"down","left","right"],[s]);return e(i.Portal,{children:e(i.Viewport,{className:["neba-portal pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 p-4",g[s]].join(" "),children:n.map(t=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof a?`${a}px`:a},children:e(_,{toast:t,swipeDirection:l,...r})},t.id))})})}export function ToastProvider({variant:o="outline",size:n="md",color:r="primary",density:l="default",position:c="bottom-end",timeout:d=5e3,limit:m=3,width:u=380,locale:p,closeLabel:f,children:b}){const x=a(s,p);return t(i.Provider,{timeout:d,limit:m,children:[b,e(T,{position:c,variant:o,size:n,color:r,density:l,width:u,closeLabel:f??x.close})]})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{boxPaddingClasses as i}from"../box/Box.js";import{actionMessages as n,useMessages as a}from"../../internal/i18n.js";import{CloseIcon as r,severityIcon as l}from"../../internal/icons.js";import{controlSlots as c,cx as d,focusRingClasses as m,hasContent as p,iconClasses as u,metaTextClasses as f,radiusClasses as b,sheetBodyClasses as v,sheetHeaderGapClasses as x,sheetSectionGapClasses as h,sheetTitleClasses as y,surfaceClasses as g}from"../../internal/styles.js";const w={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 items-start flex-col-reverse","bottom-center":"bottom-0 items-center flex-col-reverse","bottom-end":"bottom-0 items-end flex-col-reverse"},N={solid:[g,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-solid)]"].join(" "),outline:[g,"border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" "),text:[g,"text-(--neba-fg) bg-(--n-panel-press)","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]"].join(" ")},j={solid:"",outline:"text-(--n-accent)",text:"text-(--n-accent)"};function _(e){const{color:t,variant:o,icon:s,actionLabel:i,onAction:n,...a}=e;return{...a,data:{color:t,variant:o,icon:s},actionProps:void 0===i?void 0:{children:i,onClick:n}}}export function useToast(){const e=s.useToastManager();return o.useMemo(()=>({add:t=>e.add(_(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,_(o)),promise:(t,o)=>e.promise(t,{loading:_(o.loading),success:e=>_("function"==typeof o.success?o.success(e):o.success),error:e=>_("function"==typeof o.error?o.error(e):o.error)}),toasts:e.toasts}),[e])}function T({toast:o,variant:n,color:a,size:g,density:w,closeLabel:_,swipeDirection:T,classNames:z}){const k=o.data?.variant??n??"outline",D=o.data?.color??a,L=void 0===o.data?.icon?l(D):o.data.icon,M=j[k],P=p(o.title);return t(s.Root,{toast:o,swipeDirection:T,className:d("pointer-events-auto flex w-full items-start",i[w??"default"][g],b[g],h[g],v[g],N[k],u,"[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",m,"[outline:none]",z?.toast),style:c(D,3,k),children:[p(L)?e("span",{className:`flex h-[1lh] shrink-0 items-center ${M}`,children:L}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${x[g]}`,children:[e(s.Title,{className:d("neba-title font-semibold",y[g],M,z?.title)}),e(s.Description,{className:d(P&&"solid"!==k?"text-(--neba-muted-fg)":"",z?.description)})]}),e(s.Action,{className:d("flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",M||"text-(--n-on-solid)","hover:underline","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",f[g],z?.action)}),e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(s.Close,{"aria-label":_,className:d("inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--neba-duration)_var(--neba-ease)]","hover:opacity-100 focus-visible:opacity-100","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",z?.close),children:e(r,{})})})]})}function z(t){const{toasts:i}=s.useToastManager(),{position:n,width:a,classNames:r,...l}=t,c=o.useMemo(()=>[n.startsWith("top")?"up":"down","left","right"],[n]);return e(s.Portal,{children:e(s.Viewport,{className:d("neba-portal pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 p-4",w[n],r?.viewport),children:i.map(t=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof a?`${a}px`:a},children:e(T,{toast:t,swipeDirection:c,classNames:r,...l})},t.id))})})}export function ToastProvider({variant:o="outline",size:i="md",color:r="primary",density:l="default",position:c="bottom-end",timeout:d=5e3,limit:m=3,width:p=380,locale:u,closeLabel:f,classNames:b,children:v}){const x=a(n,u);return t(s.Provider,{timeout:d,limit:m,children:[v,e(z,{position:c,variant:o,size:i,color:r,density:l,width:p,closeLabel:f??x.close,classNames:b})]})}

package/dist/components/tour/Tour.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaAlign, NebaSide, NebaStyleProps } from '../../types.js';
+import type { NebaAlign, NebaSide, NebaSlots, NebaStyleProps } from '../../types.js';
 /** One stop on the tour. */
 export interface TourStep {
     /**
@@ -23,6 +23,14 @@ export interface TourStep {
      */
     padding?: number;
 }
+/**
+ * The parts a Tour draws around its card.
+ *
+ * `className` is the card — the popup the steps are written on — and `mask` is
+ * the dimming behind it, which is a sibling of the popup rather than a
+ * descendant and so has no other way in.
+ */
+export type TourSlot = 'mask' | 'title' | 'description' | 'close' | 'footer';
 export interface TourProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'> {
     /** The stops, in order. */
     steps: readonly TourStep[];
@@ -63,6 +71,13 @@ export interface TourProps extends Pick<NebaStyleProps, 'size' | 'color' | 'dens
     doneLabel?: React.ReactNode;
     /** The Skip button. */
     skipLabel?: React.ReactNode;
+    /** Class names for the card. */
+    className?: string;
+    /**
+     * Class names for the parts around it. `className` is the card, so the
+     * dimming behind it is `classNames.mask`.
+     */
+    classNames?: NebaSlots<TourSlot>;
 }
 /**
  * A guided walk over a page that already exists — the three things a new reader
@@ -79,4 +94,4 @@ export interface TourProps extends Pick<NebaStyleProps, 'size' | 'color' | 'dens
  * pointed at while the card is up, which is the difference between a tour and a
  * sequence of dialogs.
  */
-export declare function Tour({ steps, open, defaultOpen, onOpenChange, step, defaultStep, onStepChange, onFinish, mask, skippable, dismissible, scrollIntoView, locale, previousLabel, nextLabel, doneLabel, skipLabel, size, color, density }: TourProps): React.JSX.Element | null;
+export declare function Tour({ steps, open, defaultOpen, onOpenChange, step, defaultStep, onStepChange, onFinish, mask, skippable, dismissible, scrollIntoView, locale, previousLabel, nextLabel, doneLabel, skipLabel, size, color, density, className, classNames }: TourProps): React.JSX.Element | null;

package/dist/components/tour/Tour.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Popover as i}from"@base-ui/react/popover";import{Button as o}from"../button/Button.js";import{boxPaddingXClasses as s,boxPaddingYClasses as r}from"../box/Box.js";import{actionMessages as a,fill as l,stepsMessages as c,useMessages as d}from"../../internal/i18n.js";import{CloseIcon as m}from"../../internal/icons.js";import{observeResize as u}from"../../internal/observe.js";import{hasContent as p,metaTextClasses as f,radiusClasses as h,sheetBodyClasses as g,sheetHeaderGapClasses as b,sheetSectionGapClasses as v,sheetTitleClasses as x,surfaceClasses as w,surfaceSlots as y}from"../../internal/styles.js";const k=[w,"relative flex flex-col","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),_={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},j={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};function N({spot:t,radius:n}){return e("div",null===t?{"aria-hidden":"true",className:"pointer-events-none fixed inset-0 z-40 bg-(--neba-scrim)"}:{"aria-hidden":"true",className:"pointer-events-none fixed z-40 [box-shadow:0_0_0_9999px_var(--neba-scrim)]",style:{top:t.top,left:t.left,width:t.width,height:t.height,borderRadius:n}})}export function Tour({steps:w,open:z,defaultOpen:L=!1,onOpenChange:S,step:C,defaultStep:E=0,onStepChange:P,onFinish:O,mask:q=!0,skippable:B=!0,dismissible:F=!0,scrollIntoView:M=!0,locale:R,previousLabel:T,nextLabel:$,doneLabel:A,skipLabel:I,size:V="md",color:D="primary",density:H="default"}){const G=d(c,R),J=d(a,R),[K,Q]=n.useState(L),[U,W]=n.useState(E),X=z??K,Y=Math.min(C??U,Math.max(0,w.length-1)),Z=w[Y],[ee,te]=n.useState(null),ne=e=>{void 0===z&&Q(e),S?.(e)},ie=e=>{void 0===C&&W(e),P?.(e)};if(n.useEffect(()=>{const e=Z?.target;if(!X||!e)return;const t=document.querySelector(e);if(!(t instanceof HTMLElement))return;M&&t.scrollIntoView({block:"center",inline:"nearest",behavior:"smooth"});const n=Z?.padding??6;let i=0;const o=()=>{i=0;const o=t.getBoundingClientRect();te({selector:e,spot:{top:o.top-n,left:o.left-n,width:o.width+2*n,height:o.height+2*n}})},s=()=>{0===i&&(i=requestAnimationFrame(o))};o();const r=u(t,s);return window.addEventListener("scroll",s,{passive:!0,capture:!0}),window.addEventListener("resize",s,{passive:!0}),()=>{0!==i&&cancelAnimationFrame(i),r(),window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s)}},[X,Z?.target,Z?.padding,M]),0===w.length)return null;const oe=X&&Z?.target&&ee?.selector===Z.target?ee.spot:null,se=0===Y,re=Y===w.length-1,ae=s[H][V],le=r[H][V],ce=j[V],de=p(Z?.title)||p(Z?.content);return t(i.Root,{open:X,onOpenChange:(e,t)=>{(e||F||"escape-key"!==t.reason)&&(e||"outside-press"!==t.reason&&"focus-out"!==t.reason)?ne(e):t.cancel()},children:[X&&q?e(N,{spot:oe,radius:oe?8:0}):null,e(i.Portal,{children:e(i.Positioner,{className:"neba-portal z-50 [outline:none]",side:Z?.side??"bottom",align:Z?.align??"center",sideOffset:10,collisionPadding:12,anchor:()=>{if(!Z?.target)return null;const e=document.querySelector(Z.target);return e instanceof Element?e:null},children:t(i.Popup,{className:[k,h[V],g[V],v[V],_[V],ae,le].join(" "),style:y(D,3),children:[de?t("div",{className:"flex items-start gap-3",children:[t("div",{className:`flex min-w-0 flex-1 flex-col ${b[V]}`,children:[p(Z?.title)?e(i.Title,{className:`m-0 font-semibold ${x[V]}`,children:Z?.title}):null,p(Z?.content)?e(i.Description,{className:"m-0 min-w-0",children:Z?.content}):null]}),F?e("button",{type:"button","aria-label":J.close,onClick:()=>ne(!1),className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(m,{})}):null]}):null,t("div",{className:"flex items-center gap-2",children:[e("span",{className:`shrink-0 tabular-nums text-(--neba-muted-fg) ${f[V]}`,children:l(G.position,{index:String(Y+1),total:String(w.length)})}),t("div",{className:"ms-auto flex items-center gap-2",children:[B&&!re?e(o,{size:ce,variant:"text",color:"secondary",onClick:()=>ne(!1),children:I??G.skip}):null,se?null:e(o,{size:ce,variant:"outline",color:D,onClick:()=>ie(Y-1),children:T??G.previous}),e(o,{size:ce,color:D,onClick:()=>re?(O?.(),void ne(!1)):ie(Y+1),children:re?A??G.done:$??G.next})]})]})]})})})]})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Popover as s}from"@base-ui/react/popover";import{Button as o}from"../button/Button.js";import{boxPaddingXClasses as i,boxPaddingYClasses as a}from"../box/Box.js";import{actionMessages as r,fill as l,stepsMessages as c,useMessages as d}from"../../internal/i18n.js";import{CloseIcon as m}from"../../internal/icons.js";import{observeResize as u}from"../../internal/observe.js";import{cx as p,hasContent as f,metaTextClasses as h,radiusClasses as g,sheetBodyClasses as b,sheetHeaderGapClasses as v,sheetSectionGapClasses as x,sheetTitleClasses as w,surfaceClasses as y,surfaceSlots as N}from"../../internal/styles.js";const k=[y,"relative flex flex-col","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),_={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},j={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};function z({spot:t,radius:n,className:s}){return e("div",null===t?{"aria-hidden":"true",className:p("pointer-events-none fixed inset-0 z-40 bg-(--neba-scrim)",s)}:{"aria-hidden":"true",className:p("pointer-events-none fixed z-40 [box-shadow:0_0_0_9999px_var(--neba-scrim)]",s),style:{top:t.top,left:t.left,width:t.width,height:t.height,borderRadius:n}})}export function Tour({steps:y,open:L,defaultOpen:S=!1,onOpenChange:C,step:E,defaultStep:P=0,onStepChange:O,onFinish:q,mask:B=!0,skippable:F=!0,dismissible:M=!0,scrollIntoView:R=!0,locale:T,previousLabel:A,nextLabel:I,doneLabel:V,skipLabel:$,size:D="md",color:H="primary",density:G="default",className:J,classNames:K}){const Q=d(c,T),U=d(r,T),[W,X]=n.useState(S),[Y,Z]=n.useState(P),ee=L??W,te=Math.min(E??Y,Math.max(0,y.length-1)),ne=y[te],[se,oe]=n.useState(null),ie=e=>{void 0===L&&X(e),C?.(e)},ae=e=>{void 0===E&&Z(e),O?.(e)};if(n.useEffect(()=>{const e=ne?.target;if(!ee||!e)return;const t=document.querySelector(e);if(!(t instanceof HTMLElement))return;R&&t.scrollIntoView({block:"center",inline:"nearest",behavior:"smooth"});const n=ne?.padding??6;let s=0;const o=()=>{s=0;const o=t.getBoundingClientRect();oe({selector:e,spot:{top:o.top-n,left:o.left-n,width:o.width+2*n,height:o.height+2*n}})},i=()=>{0===s&&(s=requestAnimationFrame(o))};o();const a=u(t,i);return window.addEventListener("scroll",i,{passive:!0,capture:!0}),window.addEventListener("resize",i,{passive:!0}),()=>{0!==s&&cancelAnimationFrame(s),a(),window.removeEventListener("scroll",i,!0),window.removeEventListener("resize",i)}},[ee,ne?.target,ne?.padding,R]),0===y.length)return null;const re=ee&&ne?.target&&se?.selector===ne.target?se.spot:null,le=0===te,ce=te===y.length-1,de=i[G][D],me=a[G][D],ue=j[D],pe=f(ne?.title)||f(ne?.content);return t(s.Root,{open:ee,onOpenChange:(e,t)=>{(e||M||"escape-key"!==t.reason)&&(e||"outside-press"!==t.reason&&"focus-out"!==t.reason)?ie(e):t.cancel()},children:[ee&&B?e(z,{spot:re,radius:re?8:0,className:K?.mask}):null,e(s.Portal,{children:e(s.Positioner,{className:"neba-portal z-50 [outline:none]",side:ne?.side??"bottom",align:ne?.align??"center",sideOffset:10,collisionPadding:12,anchor:()=>{if(!ne?.target)return null;const e=document.querySelector(ne.target);return e instanceof Element?e:null},children:t(s.Popup,{className:p(k,g[D],b[D],x[D],_[D],de,me,J),style:N(H,3),children:[pe?t("div",{className:"flex items-start gap-3",children:[t("div",{className:`flex min-w-0 flex-1 flex-col ${v[D]}`,children:[f(ne?.title)?e(s.Title,{className:p("m-0 font-semibold",w[D],K?.title),children:ne?.title}):null,f(ne?.content)?e(s.Description,{className:p("m-0 min-w-0",K?.description),children:ne?.content}):null]}),M?e("button",{type:"button","aria-label":U.close,onClick:()=>ie(!1),className:p("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",K?.close),children:e(m,{})}):null]}):null,t("div",{className:p("flex items-center gap-2",K?.footer),children:[e("span",{className:`shrink-0 tabular-nums text-(--neba-muted-fg) ${h[D]}`,children:l(Q.position,{index:String(te+1),total:String(y.length)})}),t("div",{className:"ms-auto flex items-center gap-2",children:[F&&!ce?e(o,{size:ue,variant:"text",color:"secondary",onClick:()=>ie(!1),children:$??Q.skip}):null,le?null:e(o,{size:ue,variant:"outline",color:H,onClick:()=>ae(te-1),children:A??Q.previous}),e(o,{size:ue,color:H,onClick:()=>ce?(q?.(),void ie(!1)):ae(te+1),children:ce?V??Q.done:I??Q.next})]})]})]})})})]})}