@skdx/react 0.28.0 → 0.30.0

package/dist/toolbar/types.d.cts

@@ -1,10 +1,8 @@
 import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-import type { SelectionChangeDetail } from '../utils/useSelection.cjs';
+import type { SelectionChangeDetail, SelectionChangeReason } from '../utils/useSelection.cjs';
 /**
- * One entry of {@link ToolbarProps.items}. A discriminated union whose plain
- * button variant carries no `type` at all, so `{ label: 'Bold', onClick: bold }`
- * needs no annotation. Narrow with `'type' in item`.
+ * One entry of {@link ToolbarProps.items}: a discriminated union narrowed with `'type' in item`, whose plain-button variant carries no `type`.
  */
 export type ToolbarItem = {
     /** Text rendered inside the derived `ToolbarButton`. */
@@ -13,12 +11,12 @@ export type ToolbarItem = {
      * Called when the derived button is activated.
      * @default undefined — no-op if omitted.
      */
-    onClick?: () => void;
+    onClick?: (() => void) | undefined;
     /**
      * Disables the button and takes it out of the roving-tabindex ring.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 } | {
     /** Renders a `ToolbarLink` instead of a `ToolbarButton`. */
     type: 'link';
@@ -31,7 +29,7 @@ export type ToolbarItem = {
      * so it stays in the roving ring and announces as unavailable.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 } | {
     /** Renders a `ToolbarSeparator` between groups of controls. */
     type: 'separator';
@@ -43,23 +41,23 @@ export type ToolbarItem = {
      * (`'multiple'`), mapped to the `ToolbarToggleGroup` part's `type`.
      * @default 'single'
      */
-    mode?: 'single' | 'multiple';
+    mode?: 'single' | 'multiple' | undefined;
     /**
      * Pressed item's value(s), for controlled usage.
      * @default undefined — uncontrolled.
      */
-    value?: string | string[];
+    value?: string | string[] | undefined;
     /**
      * Fires with the pressed value(s) — a bare string under `'single'`, the
      * whole array under `'multiple'`.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string | string[]) => void;
+    onValueChange?: ((value: string | string[]) => void) | undefined;
     /**
      * Disables every item in the group.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /** The group's toggle options. */
     items: {
         /** Identifier tracked in the group's pressed value(s). */
@@ -70,12 +68,12 @@ export type ToolbarItem = {
          * Disables this option alone, on top of the group's own `disabled`.
          * @default false
          */
-        disabled?: boolean;
+        disabled?: boolean | undefined;
     }[];
 };
 /** Layout axis of a {@link Toolbar}, driving `aria-orientation` and the arrow keys used for roving-tabindex navigation. */
 export type ToolbarOrientation = 'horizontal' | 'vertical';
-/** @internal Shared state distributed from {@link Toolbar} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Toolbar} to its parts via context. */
 export interface ToolbarContextValue {
     orientation: ToolbarOrientation;
     currentTabStopId: string | null;
@@ -88,26 +86,26 @@ export interface ToolbarProps extends PrimitivePropsWithRef<'div'> {
      * `children` is given, which switches to full manual composition.
      * @default undefined — an empty toolbar.
      */
-    items?: ToolbarItem[];
+    items?: ToolbarItem[] | undefined;
     /**
      * Renders the *contents* of a derived control, in place of its label. The
      * control itself — its role, `data-*`, roving `tabIndex` and disabled state
      * — stays the library's. Not called for separators, which render no label.
      * @default undefined — the entry's `label` is rendered.
      */
-    renderItem?: (item: ToolbarItem) => React.ReactNode;
+    renderItem?: ((item: ToolbarItem) => React.ReactNode) | undefined;
     /**
      * Layout axis, exposed as `aria-orientation`/`data-orientation` and used to
      * pick Arrow Left/Right vs. Arrow Up/Down for roving-tabindex navigation.
      * @default 'horizontal'
      */
-    orientation?: ToolbarOrientation;
+    orientation?: ToolbarOrientation | undefined;
     /**
      * Whether arrow-key navigation wraps from the last item back to the first
      * (and vice versa).
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
 }
 /** Props for {@link ToolbarButton}, a plain action button in the toolbar. */
 export interface ToolbarButtonProps extends PrimitivePropsWithRef<'button'> {
@@ -115,7 +113,7 @@ export interface ToolbarButtonProps extends PrimitivePropsWithRef<'button'> {
      * Disables this button and removes it from the roving-tabindex ring.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Props for {@link ToolbarLink}, a plain navigable link in the toolbar. */
 export interface ToolbarLinkProps extends PrimitivePropsWithRef<'a'> {
@@ -125,17 +123,13 @@ export interface ToolbarSeparatorProps extends PrimitivePropsWithRef<'div'> {
 }
 /** Whether a {@link ToolbarToggleGroup} allows one pressed item (`'single'`) or several (`'multiple'`). */
 export type ToolbarToggleGroupType = 'single' | 'multiple';
-/** @internal Shared state distributed from {@link ToolbarToggleGroup} to its `ToolbarToggleItem`s via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link ToolbarToggleGroup} to its `ToolbarToggleItem`s via context. */
 export interface ToolbarToggleGroupContextValue {
     type: ToolbarToggleGroupType;
     value: string[];
     disabled: boolean;
-    /**
-     * Commits one item: presses it, or unpresses it when the group's own
-     * cardinality allows. The item never branches on `type` — that lives on the
-     * group, which is the only place that can see the whole selection.
-     */
-    onItemToggle: (value: string) => void;
+    /** Commits one item: presses it, or unpresses it when the group's cardinality allows. */
+    onItemToggle: (value: string, reason?: SelectionChangeReason) => void;
 }
 /** Props for the {@link ToolbarToggleGroup} root; `type` picks single- or multiple-item selection. */
 export interface ToolbarToggleGroupProps extends PrimitivePropsWithRef<'div'> {
@@ -143,34 +137,27 @@ export interface ToolbarToggleGroupProps extends PrimitivePropsWithRef<'div'> {
      * Disables every `ToolbarToggleItem` in the group.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Whether at most one item may be pressed at a time (`'single'`) or any
-     * number (`'multiple'`). Determines whether `value` takes a bare `string`
-     * or `string[]`, and the shape of `onValueChange` payloads.
+     * Whether at most one item may be pressed at a time (`'single'`) or any number (`'multiple'`), deciding whether `value` takes a `string` or `string[]`.
      */
     type: ToolbarToggleGroupType;
     /**
-     * Pressed item's value(s), for controlled usage — a bare `string` or a
-     * `string[]`, whichever reads better at the call site. A `'single'` group
-     * given more than one value is a programming error and throws in a
-     * development build. Pair with `onValueChange`.
+     * Pressed item's value(s), for controlled usage — a `string` or `string[]`; pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own pressed items internally.
      */
-    value?: string | string[];
+    value?: string | string[] | undefined;
     /**
      * Initially pressed item's value(s), for uncontrolled usage — the same bare
      * `string` or `string[]` shapes `value` accepts, under either cardinality.
      * @default undefined — starts with no item pressed.
      */
-    defaultValue?: string | string[];
+    defaultValue?: string | string[] | undefined;
     /**
-     * Fires whenever the pressed items change, controlled or not, carrying the
-     * whole selection as a `string[]` alongside `selectedValue` — the same detail
-     * shape in `'single'` and `'multiple'` alike.
+     * Fires whenever the pressed items change, carrying the whole selection as a `string[]` alongside `selectedValue`, `previousValue` and `reason`.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (detail: SelectionChangeDetail) => void;
+    onValueChange?: ((detail: SelectionChangeDetail) => void) | undefined;
 }
 /** Props for a single {@link ToolbarToggleItem} within a `ToolbarToggleGroup`. */
 export interface ToolbarToggleItemProps extends PrimitivePropsWithRef<'button'> {
@@ -182,5 +169,5 @@ export interface ToolbarToggleItemProps extends PrimitivePropsWithRef<'button'>
      * `data-disabled` in addition to `disabled`.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }

package/dist/toolbar/types.d.ts

@@ -1,10 +1,8 @@
 import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-import type { SelectionChangeDetail } from '../utils/useSelection.js';
+import type { SelectionChangeDetail, SelectionChangeReason } from '../utils/useSelection.js';
 /**
- * One entry of {@link ToolbarProps.items}. A discriminated union whose plain
- * button variant carries no `type` at all, so `{ label: 'Bold', onClick: bold }`
- * needs no annotation. Narrow with `'type' in item`.
+ * One entry of {@link ToolbarProps.items}: a discriminated union narrowed with `'type' in item`, whose plain-button variant carries no `type`.
  */
 export type ToolbarItem = {
     /** Text rendered inside the derived `ToolbarButton`. */
@@ -13,12 +11,12 @@ export type ToolbarItem = {
      * Called when the derived button is activated.
      * @default undefined — no-op if omitted.
      */
-    onClick?: () => void;
+    onClick?: (() => void) | undefined;
     /**
      * Disables the button and takes it out of the roving-tabindex ring.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 } | {
     /** Renders a `ToolbarLink` instead of a `ToolbarButton`. */
     type: 'link';
@@ -31,7 +29,7 @@ export type ToolbarItem = {
      * so it stays in the roving ring and announces as unavailable.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 } | {
     /** Renders a `ToolbarSeparator` between groups of controls. */
     type: 'separator';
@@ -43,23 +41,23 @@ export type ToolbarItem = {
      * (`'multiple'`), mapped to the `ToolbarToggleGroup` part's `type`.
      * @default 'single'
      */
-    mode?: 'single' | 'multiple';
+    mode?: 'single' | 'multiple' | undefined;
     /**
      * Pressed item's value(s), for controlled usage.
      * @default undefined — uncontrolled.
      */
-    value?: string | string[];
+    value?: string | string[] | undefined;
     /**
      * Fires with the pressed value(s) — a bare string under `'single'`, the
      * whole array under `'multiple'`.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string | string[]) => void;
+    onValueChange?: ((value: string | string[]) => void) | undefined;
     /**
      * Disables every item in the group.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /** The group's toggle options. */
     items: {
         /** Identifier tracked in the group's pressed value(s). */
@@ -70,12 +68,12 @@ export type ToolbarItem = {
          * Disables this option alone, on top of the group's own `disabled`.
          * @default false
          */
-        disabled?: boolean;
+        disabled?: boolean | undefined;
     }[];
 };
 /** Layout axis of a {@link Toolbar}, driving `aria-orientation` and the arrow keys used for roving-tabindex navigation. */
 export type ToolbarOrientation = 'horizontal' | 'vertical';
-/** @internal Shared state distributed from {@link Toolbar} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Toolbar} to its parts via context. */
 export interface ToolbarContextValue {
     orientation: ToolbarOrientation;
     currentTabStopId: string | null;
@@ -88,26 +86,26 @@ export interface ToolbarProps extends PrimitivePropsWithRef<'div'> {
      * `children` is given, which switches to full manual composition.
      * @default undefined — an empty toolbar.
      */
-    items?: ToolbarItem[];
+    items?: ToolbarItem[] | undefined;
     /**
      * Renders the *contents* of a derived control, in place of its label. The
      * control itself — its role, `data-*`, roving `tabIndex` and disabled state
      * — stays the library's. Not called for separators, which render no label.
      * @default undefined — the entry's `label` is rendered.
      */
-    renderItem?: (item: ToolbarItem) => React.ReactNode;
+    renderItem?: ((item: ToolbarItem) => React.ReactNode) | undefined;
     /**
      * Layout axis, exposed as `aria-orientation`/`data-orientation` and used to
      * pick Arrow Left/Right vs. Arrow Up/Down for roving-tabindex navigation.
      * @default 'horizontal'
      */
-    orientation?: ToolbarOrientation;
+    orientation?: ToolbarOrientation | undefined;
     /**
      * Whether arrow-key navigation wraps from the last item back to the first
      * (and vice versa).
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
 }
 /** Props for {@link ToolbarButton}, a plain action button in the toolbar. */
 export interface ToolbarButtonProps extends PrimitivePropsWithRef<'button'> {
@@ -115,7 +113,7 @@ export interface ToolbarButtonProps extends PrimitivePropsWithRef<'button'> {
      * Disables this button and removes it from the roving-tabindex ring.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Props for {@link ToolbarLink}, a plain navigable link in the toolbar. */
 export interface ToolbarLinkProps extends PrimitivePropsWithRef<'a'> {
@@ -125,17 +123,13 @@ export interface ToolbarSeparatorProps extends PrimitivePropsWithRef<'div'> {
 }
 /** Whether a {@link ToolbarToggleGroup} allows one pressed item (`'single'`) or several (`'multiple'`). */
 export type ToolbarToggleGroupType = 'single' | 'multiple';
-/** @internal Shared state distributed from {@link ToolbarToggleGroup} to its `ToolbarToggleItem`s via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link ToolbarToggleGroup} to its `ToolbarToggleItem`s via context. */
 export interface ToolbarToggleGroupContextValue {
     type: ToolbarToggleGroupType;
     value: string[];
     disabled: boolean;
-    /**
-     * Commits one item: presses it, or unpresses it when the group's own
-     * cardinality allows. The item never branches on `type` — that lives on the
-     * group, which is the only place that can see the whole selection.
-     */
-    onItemToggle: (value: string) => void;
+    /** Commits one item: presses it, or unpresses it when the group's cardinality allows. */
+    onItemToggle: (value: string, reason?: SelectionChangeReason) => void;
 }
 /** Props for the {@link ToolbarToggleGroup} root; `type` picks single- or multiple-item selection. */
 export interface ToolbarToggleGroupProps extends PrimitivePropsWithRef<'div'> {
@@ -143,34 +137,27 @@ export interface ToolbarToggleGroupProps extends PrimitivePropsWithRef<'div'> {
      * Disables every `ToolbarToggleItem` in the group.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Whether at most one item may be pressed at a time (`'single'`) or any
-     * number (`'multiple'`). Determines whether `value` takes a bare `string`
-     * or `string[]`, and the shape of `onValueChange` payloads.
+     * Whether at most one item may be pressed at a time (`'single'`) or any number (`'multiple'`), deciding whether `value` takes a `string` or `string[]`.
      */
     type: ToolbarToggleGroupType;
     /**
-     * Pressed item's value(s), for controlled usage — a bare `string` or a
-     * `string[]`, whichever reads better at the call site. A `'single'` group
-     * given more than one value is a programming error and throws in a
-     * development build. Pair with `onValueChange`.
+     * Pressed item's value(s), for controlled usage — a `string` or `string[]`; pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own pressed items internally.
      */
-    value?: string | string[];
+    value?: string | string[] | undefined;
     /**
      * Initially pressed item's value(s), for uncontrolled usage — the same bare
      * `string` or `string[]` shapes `value` accepts, under either cardinality.
      * @default undefined — starts with no item pressed.
      */
-    defaultValue?: string | string[];
+    defaultValue?: string | string[] | undefined;
     /**
-     * Fires whenever the pressed items change, controlled or not, carrying the
-     * whole selection as a `string[]` alongside `selectedValue` — the same detail
-     * shape in `'single'` and `'multiple'` alike.
+     * Fires whenever the pressed items change, carrying the whole selection as a `string[]` alongside `selectedValue`, `previousValue` and `reason`.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (detail: SelectionChangeDetail) => void;
+    onValueChange?: ((detail: SelectionChangeDetail) => void) | undefined;
 }
 /** Props for a single {@link ToolbarToggleItem} within a `ToolbarToggleGroup`. */
 export interface ToolbarToggleItemProps extends PrimitivePropsWithRef<'button'> {
@@ -182,5 +169,5 @@ export interface ToolbarToggleItemProps extends PrimitivePropsWithRef<'button'>
      * `data-disabled` in addition to `disabled`.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }

package/dist/tour/Tour.cjs

@@ -1 +1,2 @@
-"use strict";var or=Object.create;var _=Object.defineProperty;var nr=Object.getOwnPropertyDescriptor;var sr=Object.getOwnPropertyNames;var ir=Object.getPrototypeOf,ar=Object.prototype.hasOwnProperty;var ur=(e,t)=>{for(var r in t)_(e,r,{get:t[r],enumerable:!0})},Be=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of sr(t))!ar.call(e,n)&&n!==r&&_(e,n,{get:()=>t[n],enumerable:!(o=nr(t,n))||o.enumerable});return e};var l=(e,t,r)=>(r=e!=null?or(ir(e)):{},Be(t||!e||!e.__esModule?_(r,"default",{value:e,enumerable:!0}):r,e)),pr=e=>Be(_({},"__esModule",{value:!0}),e);var gr={};ur(gr,{Tour:()=>Se,TourActions:()=>q,TourArrow:()=>Ft,TourBackdrop:()=>J,TourCloseTrigger:()=>U,TourContent:()=>Y,TourDescription:()=>j,TourNextTrigger:()=>te,TourPortal:()=>re,TourPrevTrigger:()=>ne,TourProgressText:()=>se,TourProvider:()=>It,TourSkipTrigger:()=>ae,TourSpotlight:()=>pe,TourTitle:()=>le,TourTrigger:()=>Bt,useTourContext:()=>s});module.exports=pr(gr);var i=l(require("react"),1),N=require("../utils/clamp.cjs"),Ht=require("../utils/createContext.cjs"),Dt=require("../utils/liveAnnouncer.cjs"),me=require("../utils/popper.cjs"),k=require("../utils/useCallbackRef.cjs"),be=require("../utils/useControllableState.cjs"),Lt=require("../utils/useOpenChangeComplete.cjs");var Oe=l(require("react"),1),Ke=require("../utils/part.cjs"),$e=require("../utils/primitive.cjs"),Ve=require("react/jsx-runtime"),q=Oe.forwardRef((e,t)=>(0,Ve.jsx)($e.Primitive.div,{...e,...(0,Ke.skdxPart)("tour","actions",e.className),ref:t}));q.displayName="TourActions";var G=l(require("react"),1),Fe=require("../utils/composeRefs.cjs"),We=require("../utils/part.cjs"),ze=require("../utils/presence.cjs"),_e=require("../utils/primitive.cjs");var qe=require("react/jsx-runtime"),J=G.forwardRef(({forceMount:e,...t},r)=>{let o=s("TourBackdrop"),n=G.useRef(null),f=(0,Fe.useComposedRefs)(r,n),g=(0,ze.usePresence)(o.open,n);return o.hasBackdrop&&(e||g)?(0,qe.jsx)(_e.Primitive.div,{"aria-hidden":"true","data-state":o.open?"open":"closed",...t,...(0,We.skdxPart)("tour","backdrop",t.className),ref:f,style:{...o.spotlightStyle,...t.style}}):null});J.displayName="TourBackdrop";var Ge=l(require("react"),1),Je=require("../utils/part.cjs"),Q=require("../utils/primitive.cjs");var Qe=require("react/jsx-runtime"),U=Ge.forwardRef((e,t)=>{let r=s("TourCloseTrigger");return(0,Qe.jsx)(Q.Primitive.button,{type:"button",...e,...(0,Je.skdxPart)("tour","close-trigger",e.className),ref:t,onClick:(0,Q.composeEventHandlers)(e.onClick,()=>r.skip())})});U.displayName="TourCloseTrigger";var E=l(require("react"),1),Ue=require("../utils/composeRefs.cjs"),Xe=require("../utils/direction.cjs"),ve=require("../utils/part.cjs"),ke=require("../utils/popper.cjs"),Ye=require("../utils/presence.cjs"),he=require("../utils/primitive.cjs"),Ze=require("../utils/useCallbackRef.cjs"),je=require("../utils/useDismiss.cjs"),X=require("../utils/useFocusTrap.cjs"),et=require("../utils/useOutsideInert.cjs");var Ce=require("react/jsx-runtime");function cr(e){if(!(e instanceof HTMLElement))return!1;if(e.isContentEditable||e.getAttribute("role")==="textbox")return!0;let t=e.localName;return t==="input"||t==="textarea"||t==="select"}var Y=E.forwardRef(({forceMount:e,onEscapeKeyDown:t,onPointerDownOutside:r,onFocusOutside:o,onInteractOutside:n,onOpenAutoFocus:f,onCloseAutoFocus:g,side:de,align:Te,sideOffset:ge=8,...T},xe)=>{let a=s("TourContent"),$=(0,Ue.useComposedRefs)(xe,a.contentRef),x=(0,Ye.usePresence)(a.open,a.contentRef),{open:d,step:P,activeStep:R,anchored:V,contentRef:y,closeOnEscape:Pe,closeOnInteractOutside:Re}=a,D=d&&a.preventInteraction;(0,X.useFocusTrap)(y,d,{onOpenAutoFocus:f,onCloseAutoFocus:g}),(0,et.useOutsideInert)(y,D);let F=(0,Ze.useCallbackRef)(u=>f?.(u)),L=E.useRef(null);E.useEffect(()=>{if(!d){L.current=null;return}let u=L.current;L.current=P,!(u===null||u===P)&&(0,X.autoFocusEvent)("open-auto-focus",F)&&y.current?.focus({preventScroll:!0})},[d,P,y,F]);let I=u=>{if(!a.keyboardNavigation||u.defaultPrevented||u.altKey||u.ctrlKey||u.metaKey||cr(u.target))return;let M=(0,Xe.directionalKey)(u.key,u.currentTarget);if(M==="ArrowRight")a.next();else if(M==="ArrowLeft")a.prev();else return;u.preventDefault()};return(0,je.useDismiss)({enabled:d,onEscapeKeyDown:u=>{t?.(u),!(u.defaultPrevented||!Pe)&&a.skip()},onInteractOutside:n,onPointerDownOutside:u=>{r?.(u),!(u.defaultPrevented||!Re)&&a.skip()},onFocusOutside:o},[y]),e||x?V?(0,Ce.jsx)(ke.PopperContent,{component:"tour",role:"dialog","aria-modal":D?"true":void 0,"aria-labelledby":a.hasTitle?a.titleId:void 0,"aria-describedby":a.hasDescription?a.descriptionId:void 0,id:a.contentId,tabIndex:-1,"data-state":d?"open":"closed","data-step":P,"data-type":R?.type,"data-backdrop":a.hasBackdrop?"":void 0,"data-keyboard-navigation":a.keyboardNavigation?"":void 0,side:R?.placement??de,align:R?.align??Te,sideOffset:ge,...T,...(0,ve.skdxPart)("tour","content",T.className),ref:$,onKeyDown:(0,he.composeEventHandlers)(T.onKeyDown,I)}):(0,Ce.jsx)(ke.PopperContent,{component:"tour",role:"dialog","aria-modal":D?"true":void 0,"aria-labelledby":a.hasTitle?a.titleId:void 0,"aria-describedby":a.hasDescription?a.descriptionId:void 0,id:a.contentId,tabIndex:-1,"data-state":d?"open":"closed","data-step":P,"data-type":R?.type,"data-backdrop":a.hasBackdrop?"":void 0,"data-keyboard-navigation":a.keyboardNavigation?"":void 0,"data-centered":"","data-side":void 0,"data-align":void 0,...T,...(0,ve.skdxPart)("tour","content",T.className),ref:$,onKeyDown:(0,he.composeEventHandlers)(T.onKeyDown,I),style:{position:void 0,left:void 0,top:void 0,transform:void 0,...T.style}}):null});Y.displayName="TourContent";var Z=l(require("react"),1),tt=require("../utils/part.cjs"),rt=require("../utils/primitive.cjs");var ot=require("react/jsx-runtime"),j=Z.forwardRef((e,t)=>{let r=s("TourDescription"),{setHasDescription:o}=r;return Z.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,ot.jsx)(rt.Primitive.p,{id:r.descriptionId,...e,...(0,tt.skdxPart)("tour","description",e.className),ref:t})});j.displayName="TourDescription";var nt=l(require("react"),1),st=require("../utils/part.cjs"),ee=require("../utils/primitive.cjs");var it=require("react/jsx-runtime"),te=nt.forwardRef((e,t)=>{let r=s("TourNextTrigger"),o=r.step>=r.total-1;return(0,it.jsx)(ee.Primitive.button,{type:"button","data-last":o?"":void 0,...e,...(0,st.skdxPart)("tour","next-trigger",e.className),ref:t,onClick:(0,ee.composeEventHandlers)(e.onClick,()=>r.next())})});te.displayName="TourNextTrigger";var at=require("../utils/portal.cjs"),ut=require("../utils/presence.cjs");var pt=require("react/jsx-runtime"),re=({forceMount:e,children:t,...r})=>{let o=s("TourPortal"),n=(0,ut.usePresence)(o.open,o.contentRef);return e||n?(0,pt.jsx)(at.Portal,{...r,children:t}):null};re.displayName="TourPortal";var ct=l(require("react"),1),lt=require("../utils/part.cjs"),oe=require("../utils/primitive.cjs");var mt=require("react/jsx-runtime"),ne=ct.forwardRef((e,t)=>{let r=s("TourPrevTrigger"),o=e.disabled||r.step===0;return(0,mt.jsx)(oe.Primitive.button,{type:"button",...e,disabled:o,"data-disabled":o?"":void 0,...(0,lt.skdxPart)("tour","prev-trigger",e.className),ref:t,onClick:(0,oe.composeEventHandlers)(e.onClick,()=>r.prev())})});ne.displayName="TourPrevTrigger";var ft=l(require("react"),1),dt=require("../utils/part.cjs"),Tt=require("../utils/primitive.cjs");var gt=require("react/jsx-runtime");function lr(e,t){return`Step ${e+1} of ${t}`}var se=ft.forwardRef(({format:e=lr,children:t,...r},o)=>{let n=s("TourProgressText");return(0,gt.jsx)(Tt.Primitive.p,{"data-step":n.step,"data-total":n.total,...r,...(0,dt.skdxPart)("tour","progress-text",r.className),ref:o,children:t??e(n.step,n.total)})});se.displayName="TourProgressText";var xt=l(require("react"),1),Pt=require("../utils/part.cjs"),ie=require("../utils/primitive.cjs");var Rt=require("react/jsx-runtime"),ae=xt.forwardRef((e,t)=>{let r=s("TourSkipTrigger");return(0,Rt.jsx)(ie.Primitive.button,{type:"button",...e,...(0,Pt.skdxPart)("tour","skip-trigger",e.className),ref:t,onClick:(0,ie.composeEventHandlers)(e.onClick,()=>r.skip())})});ae.displayName="TourSkipTrigger";var ue=l(require("react"),1),yt=require("../utils/composeRefs.cjs"),vt=require("../utils/part.cjs"),kt=require("../utils/presence.cjs"),ht=require("../utils/primitive.cjs");var Ct=require("react/jsx-runtime"),pe=ue.forwardRef(({forceMount:e,...t},r)=>{let o=s("TourSpotlight"),n=ue.useRef(null),f=(0,yt.useComposedRefs)(r,n),g=(0,kt.usePresence)(o.open,n);return o.target&&(e||g)?(0,Ct.jsx)(ht.Primitive.div,{"aria-hidden":"true","data-state":o.open?"open":"closed",...t,...(0,vt.skdxPart)("tour","spotlight",t.className),ref:f,style:{...o.spotlightStyle,...t.style}}):null});pe.displayName="TourSpotlight";var ce=l(require("react"),1),bt=require("../utils/part.cjs"),St=require("../utils/primitive.cjs");var wt=require("react/jsx-runtime"),le=ce.forwardRef((e,t)=>{let r=s("TourTitle"),{setHasTitle:o}=r;return ce.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,wt.jsx)(St.Primitive.h2,{id:r.titleId,...e,...(0,bt.skdxPart)("tour","title",e.className),ref:t})});le.displayName="TourTitle";var m=require("react/jsx-runtime"),Et=({showProgress:e,showSkip:t,spotlight:r,passThrough:o})=>{let n=s("Tour"),f=n.step>=n.total-1;return(0,m.jsxs)(re,{children:[(0,m.jsx)(J,{}),r?(0,m.jsx)(pe,{}):null,(0,m.jsxs)(Y,{...o,children:[n.activeStep?.title?(0,m.jsx)(le,{children:n.activeStep.title}):null,n.activeStep?.description?(0,m.jsx)(j,{children:n.activeStep.description}):null,e?(0,m.jsx)(se,{}):null,(0,m.jsxs)(q,{children:[(0,m.jsx)(ne,{children:"Back"}),(0,m.jsx)(te,{children:f?"Done":"Next"}),t?(0,m.jsx)(ae,{children:"Skip"}):null]}),(0,m.jsx)(U,{"aria-label":"Close tour",children:"\u2715"})]})]})};var H=require("react/jsx-runtime"),[It,s]=(0,Ht.createSafeContext)("Tour"),mr=50;function fr(e,t,r){return[e.title,`Step ${t+1} of ${r}`].filter(Boolean).join(", ")}function Nt(e){return e?typeof e=="string"?document.querySelector(e):e.current:null}function dr({target:e}){let{setAnchor:t}=(0,me.usePopperContext)("TourAnchor");return i.useEffect(()=>{t(e)},[e,t]),null}function Tr(e,t){if(t===!1)return;let r=t===!0||t===void 0?{block:"center",inline:"center"}:t,o=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1;e.scrollIntoView?.(o?{...r,behavior:"auto"}:r)}function Se({children:e,steps:t,open:r,defaultOpen:o=!1,onOpenChange:n,onOpenChangeComplete:f,step:g,defaultStep:de=0,onStepChange:Te,onComplete:ge,onSkip:T,closeOnEscape:xe=!0,closeOnInteractOutside:a=!1,preventInteraction:$=!1,spotlightPadding:x=8,spotlightRadius:d=0,keyboardNavigation:P=!1,scrollIntoView:R,targetTimeout:V=2e3,onStepTargetMissing:y,getAnnouncement:Pe,showProgress:Re=!0,showSkip:D=!0,spotlight:F=!0,...L}){let I=i.useRef(null),[u,M]=i.useState(null),[h,zt]=i.useState(null),A=i.useRef(t),[C=!1,_t]=(0,be.useControllableState)({prop:r,defaultProp:o,onChange:n}),qt=(0,k.useCallbackRef)(p=>Te?.(p,A.current[p]?.id)),[c=0,we]=(0,be.useControllableState)({prop:g,defaultProp:de,onChange:qt});(0,Lt.useOpenChangeComplete)(C,I,f);let b=t.length,B=_t,Ee=(0,k.useCallbackRef)(ge),Ne=(0,k.useCallbackRef)(T),He=(0,k.useCallbackRef)(y),De=(0,k.useCallbackRef)(Pe??fr),Le=i.useRef(R);i.useEffect(()=>{A.current=t,Le.current=R});let Gt=i.useId(),Jt=i.useId(),[Qt,Ut]=i.useState(!1),[Xt,Yt]=i.useState(!1),S=i.useCallback(p=>we((0,N.clamp)(p,0,Math.max(b-1,0))),[we,b]),ye=i.useCallback(()=>{B(!1),Ee()},[B,Ee]),Ie=i.useCallback(()=>{B(!1),Ne()},[B,Ne]),Zt=i.useCallback(()=>{c>=b-1?ye():S(c+1)},[c,b,ye,S]),jt=i.useCallback(()=>S(c-1),[S,c]),Me=(0,k.useCallbackRef)(()=>{c>=b-1?Ie():S(c+1)}),W=t[c],v=W?.target,[er,tr]=i.useState(v);er!==v&&(tr(v),M(null)),i.useEffect(()=>{if(!C||!v)return;let p=K=>{Tr(K,Le.current),M(K)},O=Nt(v);if(O){p(O);return}let z=Date.now(),w=setInterval(()=>{let K=Nt(v);if(K){clearInterval(w),p(K);return}Date.now()-z<V||(clearInterval(w),He(c,A.current[c]),Me())},mr);return()=>clearInterval(w)},[C,c,v,V,He,Me]),i.useEffect(()=>{let p=()=>zt(u?.getBoundingClientRect()??null);if(p(),!!u)return window.addEventListener("scroll",p,!0),window.addEventListener("resize",p),()=>{window.removeEventListener("scroll",p,!0),window.removeEventListener("resize",p)}},[u]),i.useEffect(()=>{if(!C)return;let p=A.current[c];p&&(0,Dt.announce)(De(p,c,A.current.length))},[C,c,De]);let rr=i.useMemo(()=>{if(!h)return{};let p=window.innerWidth,O=window.innerHeight,z=(0,N.clamp)(h.left-x,0,p),w=(0,N.clamp)(h.top-x,0,O);return{"--skdx-tour-x":`${z}px`,"--skdx-tour-y":`${w}px`,"--skdx-tour-width":`${(0,N.clamp)(h.width+x*2,0,p-z)}px`,"--skdx-tour-height":`${(0,N.clamp)(h.height+x*2,0,O-w)}px`,"--skdx-tour-radius":`${d}px`}},[h,x,d]),Ae=u!==null&&W?.type!=="dialog";return(0,H.jsxs)(me.PopperRoot,{children:[(0,H.jsx)(dr,{target:Ae?u:null}),(0,H.jsx)(It,{steps:t,step:c,total:b,activeStep:W,open:C,anchored:Ae,hasBackdrop:W?.backdrop!==!1,keyboardNavigation:P,target:u,spotlightStyle:rr,contentRef:I,contentId:i.useId(),titleId:Gt,descriptionId:Jt,hasTitle:Qt,setHasTitle:Ut,hasDescription:Xt,setHasDescription:Yt,closeOnEscape:xe,closeOnInteractOutside:a,preventInteraction:$,setOpen:B,goTo:S,next:Zt,prev:jt,skip:Ie,complete:ye,children:e??(0,H.jsx)(Et,{showProgress:Re,showSkip:D,spotlight:F,passThrough:L})})]})}Se.displayName="Tour";var Mt=l(require("react"),1),At=require("../utils/part.cjs"),fe=require("../utils/primitive.cjs");var Ot=require("react/jsx-runtime"),Bt=Mt.forwardRef((e,t)=>{let r=s("TourTrigger");return(0,Ot.jsx)(fe.Primitive.button,{type:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":r.open?"open":"closed",...e,...(0,At.skdxPart)("tour","trigger",e.className),ref:t,onClick:(0,fe.composeEventHandlers)(e.onClick,()=>r.setOpen(!0))})});Bt.displayName="TourTrigger";var Kt=l(require("react"),1),$t=require("../utils/part.cjs"),Vt=require("../utils/popper.cjs");var Wt=require("react/jsx-runtime"),Ft=Kt.forwardRef((e,t)=>s("TourArrow").anchored?(0,Wt.jsx)(Vt.PopperArrow,{...e,...(0,$t.skdxPart)("tour","arrow",e.className),ref:t}):null);Ft.displayName="TourArrow";0&&(module.exports={Tour,TourActions,TourArrow,TourBackdrop,TourCloseTrigger,TourContent,TourDescription,TourNextTrigger,TourPortal,TourPrevTrigger,TourProgressText,TourProvider,TourSkipTrigger,TourSpotlight,TourTitle,TourTrigger,useTourContext});
+'use client';
+"use strict";var jt=Object.create;var Q=Object.defineProperty;var eo=Object.getOwnPropertyDescriptor;var to=Object.getOwnPropertyNames;var oo=Object.getPrototypeOf,ro=Object.prototype.hasOwnProperty;var no=(t,e)=>{for(var o in e)Q(t,o,{get:e[o],enumerable:!0})},Oe=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of to(e))!ro.call(t,n)&&n!==o&&Q(t,n,{get:()=>e[n],enumerable:!(r=eo(e,n))||r.enumerable});return t};var L=(t,e,o)=>(o=t!=null?jt(oo(t)):{},Oe(e||!t||!t.__esModule?Q(o,"default",{value:t,enumerable:!0}):o,t)),so=t=>Oe(Q({},"__esModule",{value:!0}),t);var To={};no(To,{Tour:()=>he,TourActions:()=>U,TourArrow:()=>Vt,TourBackdrop:()=>Y,TourCloseTrigger:()=>j,TourContent:()=>te,TourDescription:()=>oe,TourNextTrigger:()=>ne,TourPortal:()=>se,TourPrevTrigger:()=>ae,TourProgressText:()=>pe,TourProvider:()=>At,TourSkipTrigger:()=>ce,TourSpotlight:()=>le,TourTitle:()=>me,TourTrigger:()=>Dt,useTourContext:()=>s});module.exports=so(To);var i=L(require("react"),1),M=require("../utils/clamp.cjs"),wt=require("../utils/createContext.cjs"),Et=require("../utils/liveAnnouncer.cjs"),fe=require("../utils/popper.cjs"),v=require("../utils/useCallbackRef.cjs"),xe=require("../utils/useControllableState.cjs"),It=require("../utils/useOpenChangeComplete.cjs");var vt=require("../utils/Glyph.cjs");var De=require("../utils/part.cjs"),He=require("../utils/primitive.cjs"),Le=require("react/jsx-runtime"),U=({ref:t,...e})=>(0,Le.jsx)(He.Primitive.div,{...e,...(0,De.skdxPart)("tour","actions",e.className),ref:t});U.displayName="TourActions";var Me=L(require("react"),1),Ve=require("../utils/composeRefs.cjs"),Be=require("../utils/part.cjs"),Ke=require("../utils/presence.cjs"),$e=require("../utils/primitive.cjs");var Fe=require("react/jsx-runtime"),Y=({forceMount:t,ref:e,...o})=>{let r=s("TourBackdrop"),n=Me.useRef(null),f=(0,Ve.useComposedRefs)(e,n),P=(0,Ke.usePresence)(r.open,n);return r.hasBackdrop&&(t||P)?(0,Fe.jsx)($e.Primitive.div,{"aria-hidden":"true","data-state":r.open?"open":"closed",...o,...(0,Be.skdxPart)("tour","backdrop",o.className),ref:f,style:{...r.spotlightStyle,...o.style}}):null};Y.displayName="TourBackdrop";var Je=require("../utils/part.cjs"),Z=require("../utils/primitive.cjs");var Xe=require("react/jsx-runtime"),j=({ref:t,...e})=>{let o=s("TourCloseTrigger");return(0,Xe.jsx)(Z.Primitive.button,{type:"button",...e,...(0,Je.skdxPart)("tour","close-trigger",e.className),ref:t,onClick:(0,Z.composeEventHandlers)(e.onClick,()=>o.skip())})};j.displayName="TourCloseTrigger";var ee=L(require("react"),1),qe=require("../utils/composeRefs.cjs"),ze=require("../utils/direction.cjs"),_e=require("../utils/dismissal.cjs"),ge=require("../utils/part.cjs"),Pe=require("../utils/popper.cjs"),Ge=require("../utils/presence.cjs"),Re=require("../utils/primitive.cjs"),Qe=require("../utils/useCallbackRef.cjs"),Ue=require("../utils/useDismiss.cjs"),Ye=require("../utils/useFocusTrap.cjs"),Ze=require("../utils/useOutsideInert.cjs");var ye=require("react/jsx-runtime");function io(t){if(!(t instanceof HTMLElement))return!1;if(t.isContentEditable||t.getAttribute("role")==="textbox")return!0;let e=t.localName;return e==="input"||e==="textarea"||e==="select"}function We(t,e,o,r,n){return{"aria-modal":n||void 0,"aria-labelledby":t.hasTitle?t.titleId:void 0,"aria-describedby":t.hasDescription?t.descriptionId:void 0,id:t.contentId,tabIndex:-1,"data-state":e?"open":"closed","data-step":o,"data-type":r?.type,"data-backdrop":t.hasBackdrop?"":void 0,"data-keyboard-navigation":t.keyboardNavigation?"":void 0}}var te=({forceMount:t,onEscapeKeyDown:e,onPointerDownOutside:o,onFocusOutside:r,onInteractOutside:n,onOpenAutoFocus:f,onCloseAutoFocus:P,side:B,align:K,sideOffset:$=8,ref:F,...d})=>{let u=s("TourContent"),b=(0,qe.useComposedRefs)(F,u.contentRef),J=(0,Ge.usePresence)(u.open,u.contentRef),{open:l,step:T,activeStep:x,anchored:N,contentRef:g,closeOnEscape:X,closeOnInteractOutside:W}=u,h=l&&u.preventInteraction;(0,Ye.useFocusTrap)(g,l,{onOpenAutoFocus:f,onCloseAutoFocus:P}),(0,Ze.useOutsideInert)(g,h);let w=(0,Qe.useCallbackRef)(a=>f?.(a)),S=ee.useRef(null);ee.useEffect(()=>{if(!l){S.current=null;return}let a=S.current;S.current=T,!(a===null||a===T)&&(0,_e.autoFocusEvent)("open-auto-focus",w)&&g.current?.focus({preventScroll:!0})},[l,T,g,w]);let E=a=>{if(!u.keyboardNavigation||a.defaultPrevented||a.altKey||a.ctrlKey||a.metaKey||io(a.target))return;let R=(0,ze.directionalKey)(a.key,a.currentTarget);if(R==="ArrowRight")u.next();else if(R==="ArrowLeft")u.prev();else return;a.preventDefault()};return(0,Ue.useDismiss)({enabled:l,onEscapeKeyDown:a=>{e?.(a),!(a.defaultPrevented||!X)&&u.skip()},onInteractOutside:n,onPointerDownOutside:a=>{o?.(a),!(a.defaultPrevented||!W)&&u.skip()},onFocusOutside:r},[g]),t||J?N?(0,ye.jsx)(Pe.PopperContent,{component:"tour",role:"dialog",...We(u,l,T,x,h),side:x?.placement??B,align:x?.align??K,sideOffset:$,...d,...(0,ge.skdxPart)("tour","content",d.className),ref:b,onKeyDown:(0,Re.composeEventHandlers)(d.onKeyDown,E)}):(0,ye.jsx)(Pe.PopperContent,{component:"tour",role:"dialog",...We(u,l,T,x,h),"data-centered":"","data-side":void 0,"data-align":void 0,...d,...(0,ge.skdxPart)("tour","content",d.className),ref:b,onKeyDown:(0,Re.composeEventHandlers)(d.onKeyDown,E),style:{position:void 0,left:void 0,top:void 0,transform:void 0,...d.style}}):null};te.displayName="TourContent";var je=L(require("react"),1),et=require("../utils/part.cjs"),tt=require("../utils/primitive.cjs");var ot=require("react/jsx-runtime"),oe=({ref:t,...e})=>{let o=s("TourDescription"),{setHasDescription:r}=o;return je.useEffect(()=>(r(!0),()=>r(!1)),[r]),(0,ot.jsx)(tt.Primitive.p,{id:o.descriptionId,...e,...(0,et.skdxPart)("tour","description",e.className),ref:t})};oe.displayName="TourDescription";var rt=require("../utils/part.cjs"),re=require("../utils/primitive.cjs");var nt=require("react/jsx-runtime"),ne=({ref:t,...e})=>{let o=s("TourNextTrigger"),r=o.step>=o.total-1;return(0,nt.jsx)(re.Primitive.button,{type:"button","data-last":r?"":void 0,...e,...(0,rt.skdxPart)("tour","next-trigger",e.className),ref:t,onClick:(0,re.composeEventHandlers)(e.onClick,()=>o.next())})};ne.displayName="TourNextTrigger";var st=require("../utils/portal.cjs"),it=require("../utils/presence.cjs");var at=require("react/jsx-runtime"),se=({forceMount:t,children:e,...o})=>{let r=s("TourPortal"),n=(0,it.usePresence)(r.open,r.contentRef);return t||n?(0,at.jsx)(st.Portal,{...o,children:e}):null};se.displayName="TourPortal";var pt=require("../utils/part.cjs"),ie=require("../utils/primitive.cjs");var ut=require("react/jsx-runtime"),ae=({ref:t,...e})=>{let o=s("TourPrevTrigger"),r=e.disabled||o.step===0;return(0,ut.jsx)(ie.Primitive.button,{type:"button",...e,disabled:r,"data-disabled":r?"":void 0,...(0,pt.skdxPart)("tour","prev-trigger",e.className),ref:t,onClick:(0,ie.composeEventHandlers)(e.onClick,()=>o.prev())})};ae.displayName="TourPrevTrigger";var ct=require("../utils/part.cjs"),lt=require("../utils/primitive.cjs");var mt=require("react/jsx-runtime");function ao(t,e){return`Step ${t+1} of ${e}`}var pe=({format:t=ao,children:e,ref:o,...r})=>{let n=s("TourProgressText");return(0,mt.jsx)(lt.Primitive.p,{"data-step":n.step,"data-total":n.total,...r,...(0,ct.skdxPart)("tour","progress-text",r.className),ref:o,children:e??t(n.step,n.total)})};pe.displayName="TourProgressText";var ft=require("../utils/part.cjs"),ue=require("../utils/primitive.cjs");var dt=require("react/jsx-runtime"),ce=({ref:t,...e})=>{let o=s("TourSkipTrigger");return(0,dt.jsx)(ue.Primitive.button,{type:"button",...e,...(0,ft.skdxPart)("tour","skip-trigger",e.className),ref:t,onClick:(0,ue.composeEventHandlers)(e.onClick,()=>o.skip())})};ce.displayName="TourSkipTrigger";var Tt=L(require("react"),1),gt=require("../utils/composeRefs.cjs"),Pt=require("../utils/part.cjs"),Rt=require("../utils/presence.cjs"),yt=require("../utils/primitive.cjs");var xt=require("react/jsx-runtime"),le=({forceMount:t,ref:e,...o})=>{let r=s("TourSpotlight"),n=Tt.useRef(null),f=(0,gt.useComposedRefs)(e,n),P=(0,Rt.usePresence)(r.open,n);return r.target&&(t||P)?(0,xt.jsx)(yt.Primitive.div,{"aria-hidden":"true","data-state":r.open?"open":"closed",...o,...(0,Pt.skdxPart)("tour","spotlight",o.className),ref:f,style:{...r.spotlightStyle,...o.style}}):null};le.displayName="TourSpotlight";var ht=L(require("react"),1),St=require("../utils/part.cjs"),Ct=require("../utils/primitive.cjs");var kt=require("react/jsx-runtime"),me=({ref:t,...e})=>{let o=s("TourTitle"),{setHasTitle:r}=o;return ht.useEffect(()=>(r(!0),()=>r(!1)),[r]),(0,kt.jsx)(Ct.Primitive.h2,{id:o.titleId,...e,...(0,St.skdxPart)("tour","title",e.className),ref:t})};me.displayName="TourTitle";var c=require("react/jsx-runtime"),po=()=>(0,c.jsx)(vt.Glyph,{name:"close"}),bt=({showProgress:t,showSkip:e,spotlight:o,passThrough:r})=>{let n=s("Tour"),f=n.step>=n.total-1;return(0,c.jsxs)(se,{children:[(0,c.jsx)(Y,{}),o?(0,c.jsx)(le,{}):null,(0,c.jsxs)(te,{...r,children:[n.activeStep?.title?(0,c.jsx)(me,{children:n.activeStep.title}):null,n.activeStep?.description?(0,c.jsx)(oe,{children:n.activeStep.description}):null,t?(0,c.jsx)(pe,{}):null,(0,c.jsxs)(U,{children:[(0,c.jsx)(ae,{children:"Back"}),(0,c.jsx)(ne,{children:f?"Done":"Next"}),e?(0,c.jsx)(ce,{children:"Skip"}):null,(0,c.jsx)(j,{"aria-label":"Close tour",children:(0,c.jsx)(po,{})})]})]})]})};var V=require("react/jsx-runtime"),[At,s]=(0,wt.createSafeContext)("Tour"),uo=50;function co(t,e,o){return[t.title,`Step ${e+1} of ${o}`].filter(Boolean).join(", ")}function Nt(t){return t?typeof t=="string"?document.querySelector(t):t.current:null}function lo({target:t}){let{setAnchor:e}=(0,fe.usePopperContext)("TourAnchor");return i.useEffect(()=>{e(t)},[t,e]),null}function mo(t,e){if(e===!1)return;let o=e===!0||e===void 0?{block:"center",inline:"center"}:e,r=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1;t.scrollIntoView?.(r?{...o,behavior:"auto"}:o)}function fo(t){let{children:e,steps:o,open:r,defaultOpen:n=!1,onOpenChange:f,onOpenChangeComplete:P,step:B,defaultStep:K=0,onStepChange:$,onComplete:F,onSkip:d,closeOnEscape:u=!0,closeOnInteractOutside:b=!1,preventInteraction:J=!1,spotlightPadding:l=8,spotlightRadius:T=0,keyboardNavigation:x=!1,scrollIntoView:N,targetTimeout:g=2e3,onStepTargetMissing:X,getAnnouncement:W,showProgress:h=!0,showSkip:w=!0,spotlight:S=!0,...E}=t;return{children:e,steps:o,openProp:r,defaultOpen:n,onOpenChange:f,onOpenChangeComplete:P,stepProp:B,defaultStep:K,onStepChange:$,onComplete:F,onSkip:d,closeOnEscape:u,closeOnInteractOutside:b,preventInteraction:J,spotlightPadding:l,spotlightRadius:T,keyboardNavigation:x,scrollIntoView:N,targetTimeout:g,onStepTargetMissing:X,getAnnouncement:W,showProgress:h,showSkip:w,spotlight:S,passThrough:E}}function he(t){let{children:e,steps:o,openProp:r,defaultOpen:n,onOpenChange:f,onOpenChangeComplete:P,stepProp:B,defaultStep:K,onStepChange:$,onComplete:F,onSkip:d,closeOnEscape:u,closeOnInteractOutside:b,preventInteraction:J,spotlightPadding:l,spotlightRadius:T,keyboardNavigation:x,scrollIntoView:N,targetTimeout:g,onStepTargetMissing:X,getAnnouncement:W,showProgress:h,showSkip:w,spotlight:S,passThrough:E}=fo(t),a=i.useRef(null),[R,Se]=i.useState(null),[I,Kt]=i.useState(null),q=i.useRef(o),[A=!1,$t]=(0,xe.useControllableState)({prop:r,defaultProp:n,onChange:f}),Ft=(0,v.useCallbackRef)(p=>$?.({index:p,id:q.current[p]?.id})),[m=0,Ce]=(0,xe.useControllableState)({prop:B,defaultProp:K,onChange:Ft});(0,It.useOpenChangeComplete)(A,a,P);let O=o.length,z=$t,ke=(0,v.useCallbackRef)(F),ve=(0,v.useCallbackRef)(d),be=(0,v.useCallbackRef)(X),Ne=(0,v.useCallbackRef)(W??co),we=i.useRef(N);i.useEffect(()=>{q.current=o,we.current=N});let Jt=i.useId(),Xt=i.useId(),[Wt,qt]=i.useState(!1),[zt,_t]=i.useState(!1),D=i.useCallback(p=>Ce((0,M.clamp)(p,0,Math.max(O-1,0))),[Ce,O]),Te=i.useCallback(()=>{z(!1),ke()},[z,ke]),Ee=i.useCallback(()=>{z(!1),ve()},[z,ve]),Gt=i.useCallback(()=>{m>=O-1?Te():D(m+1)},[m,O,Te,D]),Qt=i.useCallback(()=>D(m-1),[D,m]),Ie=(0,v.useCallbackRef)(()=>{m>=O-1?Ee():D(m+1)}),G=o[m],C=G?.target,[Ut,Yt]=i.useState(C);Ut!==C&&(Yt(C),Se(null)),i.useEffect(()=>{if(!A||!C)return;let p=_=>{mo(_,we.current),Se(_)},y=Nt(C);if(y){p(y);return}let k=Date.now(),H=setInterval(()=>{let _=Nt(C);if(_){clearInterval(H),p(_);return}Date.now()-k<g||(clearInterval(H),be({index:m,step:q.current[m]}),Ie())},uo);return()=>clearInterval(H)},[A,m,C,g,be,Ie]),i.useEffect(()=>{let p=()=>Kt(R?.getBoundingClientRect()??null);if(p(),!R)return;let y=0,k=()=>{cancelAnimationFrame(y),y=requestAnimationFrame(p)};return window.addEventListener("scroll",k,{passive:!0,capture:!0}),window.addEventListener("resize",p),()=>{cancelAnimationFrame(y),window.removeEventListener("scroll",k,{capture:!0}),window.removeEventListener("resize",p)}},[R]),i.useEffect(()=>{if(!A)return;let p=q.current[m];p&&(0,Et.announce)(Ne(p,m,q.current.length))},[A,m,Ne]);let Zt=i.useMemo(()=>{if(!I)return{};let p=window.innerWidth,y=window.innerHeight,k=(0,M.clamp)(I.left-l,0,p),H=(0,M.clamp)(I.top-l,0,y);return{"--skdx-tour-x":`${k}px`,"--skdx-tour-y":`${H}px`,"--skdx-tour-width":`${(0,M.clamp)(I.width+l*2,0,p-k)}px`,"--skdx-tour-height":`${(0,M.clamp)(I.height+l*2,0,y-H)}px`,"--skdx-tour-radius":`${T}px`}},[I,l,T]),Ae=R!==null&&G?.type!=="dialog";return(0,V.jsxs)(fe.PopperRoot,{children:[(0,V.jsx)(lo,{target:Ae?R:null}),(0,V.jsx)(At,{steps:o,step:m,total:O,activeStep:G,open:A,anchored:Ae,hasBackdrop:G?.backdrop!==!1,keyboardNavigation:x,target:R,spotlightStyle:Zt,contentRef:a,contentId:i.useId(),titleId:Jt,descriptionId:Xt,hasTitle:Wt,setHasTitle:qt,hasDescription:zt,setHasDescription:_t,closeOnEscape:u,closeOnInteractOutside:b,preventInteraction:J,setOpen:z,goTo:D,next:Gt,prev:Qt,skip:Ee,complete:Te,children:e??(0,V.jsx)(bt,{showProgress:h,showSkip:w,spotlight:S,passThrough:E})})]})}he.displayName="Tour";var Ot=require("../utils/part.cjs"),de=require("../utils/primitive.cjs");var Ht=require("react/jsx-runtime"),Dt=({ref:t,...e})=>{let o=s("TourTrigger");return(0,Ht.jsx)(de.Primitive.button,{type:"button","aria-haspopup":"dialog","aria-expanded":o.open,"aria-controls":o.contentId,"data-state":o.open?"open":"closed",...e,...(0,Ot.skdxPart)("tour","trigger",e.className),ref:t,onClick:(0,de.composeEventHandlers)(e.onClick,()=>o.setOpen(!0))})};Dt.displayName="TourTrigger";var Lt=require("../utils/part.cjs"),Mt=require("../utils/popper.cjs");var Bt=require("react/jsx-runtime"),Vt=({ref:t,...e})=>s("TourArrow").anchored?(0,Bt.jsx)(Mt.PopperArrow,{...e,...(0,Lt.skdxPart)("tour","arrow",e.className),ref:t}):null;Vt.displayName="TourArrow";0&&(module.exports={Tour,TourActions,TourArrow,TourBackdrop,TourCloseTrigger,TourContent,TourDescription,TourNextTrigger,TourPortal,TourPrevTrigger,TourProgressText,TourProvider,TourSkipTrigger,TourSpotlight,TourTitle,TourTrigger,useTourContext});

package/dist/tour/Tour.d.cts

@@ -1,20 +1,13 @@
 import * as React from 'react';
 import type { TourContextValue, TourProps } from './types.cjs';
-export declare const TourProvider: {
-    (props: TourContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useTourContext: (consumerName: string) => TourContextValue;
+export declare const TourProvider: React.FC<TourContextValue & {
+    children: React.ReactNode;
+}>, useTourContext: (consumerName: string) => TourContextValue;
 /**
- * Root of stepped product tour: owns state, step index, target resolution and spotlight geometry.
- * Derives portal, backdrop, spotlight and content from `steps` and related props, or renders children.
- * Steps are data (selector, placement, title, type). Polled for unresolved targets up to `targetTimeout`.
- * Works controlled (`open`/`step` + callbacks) or uncontrolled (`defaultOpen`/`defaultStep`).
+ * Root of a stepped product tour that resolves each step's target and renders the spotlight, backdrop and content.
  * @example `<Tour steps={[{ title: 'Welcome' }, { target: '#inbox', title: 'Your inbox' }]} onComplete={() => localStorage.setItem('tour-seen', '1')} />`
- * @example Full manual composition from `@skdx/react/primitives/tour` for unrestricted control.
  */
-export declare function Tour({ children, steps, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, step: stepProp, defaultStep, onStepChange, onComplete, onSkip, closeOnEscape, closeOnInteractOutside, preventInteraction, spotlightPadding, spotlightRadius, keyboardNavigation, scrollIntoView, targetTimeout, onStepTargetMissing, getAnnouncement, showProgress, showSkip, spotlight, ...passThrough }: TourProps): React.JSX.Element;
+export declare function Tour(tourProps: TourProps): React.JSX.Element;
 export declare namespace Tour {
     var displayName: string;
 }

package/dist/tour/Tour.d.ts

@@ -1,20 +1,13 @@
 import * as React from 'react';
 import type { TourContextValue, TourProps } from './types.js';
-export declare const TourProvider: {
-    (props: TourContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useTourContext: (consumerName: string) => TourContextValue;
+export declare const TourProvider: React.FC<TourContextValue & {
+    children: React.ReactNode;
+}>, useTourContext: (consumerName: string) => TourContextValue;
 /**
- * Root of stepped product tour: owns state, step index, target resolution and spotlight geometry.
- * Derives portal, backdrop, spotlight and content from `steps` and related props, or renders children.
- * Steps are data (selector, placement, title, type). Polled for unresolved targets up to `targetTimeout`.
- * Works controlled (`open`/`step` + callbacks) or uncontrolled (`defaultOpen`/`defaultStep`).
+ * Root of a stepped product tour that resolves each step's target and renders the spotlight, backdrop and content.
  * @example `<Tour steps={[{ title: 'Welcome' }, { target: '#inbox', title: 'Your inbox' }]} onComplete={() => localStorage.setItem('tour-seen', '1')} />`
- * @example Full manual composition from `@skdx/react/primitives/tour` for unrestricted control.
  */
-export declare function Tour({ children, steps, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, step: stepProp, defaultStep, onStepChange, onComplete, onSkip, closeOnEscape, closeOnInteractOutside, preventInteraction, spotlightPadding, spotlightRadius, keyboardNavigation, scrollIntoView, targetTimeout, onStepTargetMissing, getAnnouncement, showProgress, showSkip, spotlight, ...passThrough }: TourProps): React.JSX.Element;
+export declare function Tour(tourProps: TourProps): React.JSX.Element;
 export declare namespace Tour {
     var displayName: string;
 }

package/dist/tour/Tour.js

@@ -1 +1,2 @@
-import*as s from"react";import{clamp as B}from"../utils/clamp.js";import{createSafeContext as Ut}from"../utils/createContext.js";import{announce as Xt}from"../utils/liveAnnouncer.js";import{PopperRoot as Yt,usePopperContext as Zt}from"../utils/popper.js";import{useCallbackRef as w}from"../utils/useCallbackRef.js";import{useControllableState as Ie}from"../utils/useControllableState.js";import{useOpenChangeComplete as jt}from"../utils/useOpenChangeComplete.js";import*as ke from"react";import{skdxPart as Ze}from"../utils/part.js";import{Primitive as je}from"../utils/primitive.js";import{jsx as et}from"react/jsx-runtime";var j=ke.forwardRef((e,t)=>et(je.div,{...e,...Ze("tour","actions",e.className),ref:t}));j.displayName="TourActions";import*as W from"react";import{useComposedRefs as tt}from"../utils/composeRefs.js";import{skdxPart as rt}from"../utils/part.js";import{usePresence as ot}from"../utils/presence.js";import{Primitive as nt}from"../utils/primitive.js";import{jsx as st}from"react/jsx-runtime";var ee=W.forwardRef(({forceMount:e,...t},r)=>{let o=n("TourBackdrop"),u=W.useRef(null),l=tt(r,u),T=ot(o.open,u);return o.hasBackdrop&&(e||T)?st(nt.div,{"aria-hidden":"true","data-state":o.open?"open":"closed",...t,...rt("tour","backdrop",t.className),ref:l,style:{...o.spotlightStyle,...t.style}}):null});ee.displayName="TourBackdrop";import*as he from"react";import{skdxPart as it}from"../utils/part.js";import{composeEventHandlers as at,Primitive as ut}from"../utils/primitive.js";import{jsx as pt}from"react/jsx-runtime";var te=he.forwardRef((e,t)=>{let r=n("TourCloseTrigger");return pt(ut.button,{type:"button",...e,...it("tour","close-trigger",e.className),ref:t,onClick:at(e.onClick,()=>r.skip())})});te.displayName="TourCloseTrigger";import*as S from"react";import{useComposedRefs as ct}from"../utils/composeRefs.js";import{directionalKey as lt}from"../utils/direction.js";import{skdxPart as Ce}from"../utils/part.js";import{PopperContent as be}from"../utils/popper.js";import{usePresence as mt}from"../utils/presence.js";import{composeEventHandlers as Se}from"../utils/primitive.js";import{useCallbackRef as ft}from"../utils/useCallbackRef.js";import{useDismiss as dt}from"../utils/useDismiss.js";import{autoFocusEvent as Tt,useFocusTrap as gt}from"../utils/useFocusTrap.js";import{useOutsideInert as xt}from"../utils/useOutsideInert.js";import{jsx as we}from"react/jsx-runtime";function Pt(e){if(!(e instanceof HTMLElement))return!1;if(e.isContentEditable||e.getAttribute("role")==="textbox")return!0;let t=e.localName;return t==="input"||t==="textarea"||t==="select"}var re=S.forwardRef(({forceMount:e,onEscapeKeyDown:t,onPointerDownOutside:r,onFocusOutside:o,onInteractOutside:u,onOpenAutoFocus:l,onCloseAutoFocus:T,side:G,align:J,sideOffset:Q=8,...f},U)=>{let i=n("TourContent"),O=ct(U,i.contentRef),g=mt(i.open,i.contentRef),{open:m,step:x,activeStep:P,anchored:K,contentRef:R,closeOnEscape:X,closeOnInteractOutside:Y}=i,E=m&&i.preventInteraction;gt(R,m,{onOpenAutoFocus:l,onCloseAutoFocus:T}),xt(R,E);let $=ft(a=>l?.(a)),N=S.useRef(null);S.useEffect(()=>{if(!m){N.current=null;return}let a=N.current;N.current=x,!(a===null||a===x)&&Tt("open-auto-focus",$)&&R.current?.focus({preventScroll:!0})},[m,x,R,$]);let H=a=>{if(!i.keyboardNavigation||a.defaultPrevented||a.altKey||a.ctrlKey||a.metaKey||Pt(a.target))return;let D=lt(a.key,a.currentTarget);if(D==="ArrowRight")i.next();else if(D==="ArrowLeft")i.prev();else return;a.preventDefault()};return dt({enabled:m,onEscapeKeyDown:a=>{t?.(a),!(a.defaultPrevented||!X)&&i.skip()},onInteractOutside:u,onPointerDownOutside:a=>{r?.(a),!(a.defaultPrevented||!Y)&&i.skip()},onFocusOutside:o},[R]),e||g?K?we(be,{component:"tour",role:"dialog","aria-modal":E?"true":void 0,"aria-labelledby":i.hasTitle?i.titleId:void 0,"aria-describedby":i.hasDescription?i.descriptionId:void 0,id:i.contentId,tabIndex:-1,"data-state":m?"open":"closed","data-step":x,"data-type":P?.type,"data-backdrop":i.hasBackdrop?"":void 0,"data-keyboard-navigation":i.keyboardNavigation?"":void 0,side:P?.placement??G,align:P?.align??J,sideOffset:Q,...f,...Ce("tour","content",f.className),ref:O,onKeyDown:Se(f.onKeyDown,H)}):we(be,{component:"tour",role:"dialog","aria-modal":E?"true":void 0,"aria-labelledby":i.hasTitle?i.titleId:void 0,"aria-describedby":i.hasDescription?i.descriptionId:void 0,id:i.contentId,tabIndex:-1,"data-state":m?"open":"closed","data-step":x,"data-type":P?.type,"data-backdrop":i.hasBackdrop?"":void 0,"data-keyboard-navigation":i.keyboardNavigation?"":void 0,"data-centered":"","data-side":void 0,"data-align":void 0,...f,...Ce("tour","content",f.className),ref:O,onKeyDown:Se(f.onKeyDown,H),style:{position:void 0,left:void 0,top:void 0,transform:void 0,...f.style}}):null});re.displayName="TourContent";import*as z from"react";import{skdxPart as Rt}from"../utils/part.js";import{Primitive as yt}from"../utils/primitive.js";import{jsx as vt}from"react/jsx-runtime";var oe=z.forwardRef((e,t)=>{let r=n("TourDescription"),{setHasDescription:o}=r;return z.useEffect(()=>(o(!0),()=>o(!1)),[o]),vt(yt.p,{id:r.descriptionId,...e,...Rt("tour","description",e.className),ref:t})});oe.displayName="TourDescription";import*as Ee from"react";import{skdxPart as kt}from"../utils/part.js";import{composeEventHandlers as ht,Primitive as Ct}from"../utils/primitive.js";import{jsx as bt}from"react/jsx-runtime";var ne=Ee.forwardRef((e,t)=>{let r=n("TourNextTrigger"),o=r.step>=r.total-1;return bt(Ct.button,{type:"button","data-last":o?"":void 0,...e,...kt("tour","next-trigger",e.className),ref:t,onClick:ht(e.onClick,()=>r.next())})});ne.displayName="TourNextTrigger";import{Portal as St}from"../utils/portal.js";import{usePresence as wt}from"../utils/presence.js";import{jsx as Et}from"react/jsx-runtime";var se=({forceMount:e,children:t,...r})=>{let o=n("TourPortal"),u=wt(o.open,o.contentRef);return e||u?Et(St,{...r,children:t}):null};se.displayName="TourPortal";import*as Ne from"react";import{skdxPart as Nt}from"../utils/part.js";import{composeEventHandlers as Ht,Primitive as Dt}from"../utils/primitive.js";import{jsx as Lt}from"react/jsx-runtime";var ie=Ne.forwardRef((e,t)=>{let r=n("TourPrevTrigger"),o=e.disabled||r.step===0;return Lt(Dt.button,{type:"button",...e,disabled:o,"data-disabled":o?"":void 0,...Nt("tour","prev-trigger",e.className),ref:t,onClick:Ht(e.onClick,()=>r.prev())})});ie.displayName="TourPrevTrigger";import*as He from"react";import{skdxPart as It}from"../utils/part.js";import{Primitive as Mt}from"../utils/primitive.js";import{jsx as Bt}from"react/jsx-runtime";function At(e,t){return`Step ${e+1} of ${t}`}var ae=He.forwardRef(({format:e=At,children:t,...r},o)=>{let u=n("TourProgressText");return Bt(Mt.p,{"data-step":u.step,"data-total":u.total,...r,...It("tour","progress-text",r.className),ref:o,children:t??e(u.step,u.total)})});ae.displayName="TourProgressText";import*as De from"react";import{skdxPart as Ot}from"../utils/part.js";import{composeEventHandlers as Kt,Primitive as $t}from"../utils/primitive.js";import{jsx as Vt}from"react/jsx-runtime";var ue=De.forwardRef((e,t)=>{let r=n("TourSkipTrigger");return Vt($t.button,{type:"button",...e,...Ot("tour","skip-trigger",e.className),ref:t,onClick:Kt(e.onClick,()=>r.skip())})});ue.displayName="TourSkipTrigger";import*as _ from"react";import{useComposedRefs as Ft}from"../utils/composeRefs.js";import{skdxPart as Wt}from"../utils/part.js";import{usePresence as zt}from"../utils/presence.js";import{Primitive as _t}from"../utils/primitive.js";import{jsx as qt}from"react/jsx-runtime";var pe=_.forwardRef(({forceMount:e,...t},r)=>{let o=n("TourSpotlight"),u=_.useRef(null),l=Ft(r,u),T=zt(o.open,u);return o.target&&(e||T)?qt(_t.div,{"aria-hidden":"true","data-state":o.open?"open":"closed",...t,...Wt("tour","spotlight",t.className),ref:l,style:{...o.spotlightStyle,...t.style}}):null});pe.displayName="TourSpotlight";import*as q from"react";import{skdxPart as Gt}from"../utils/part.js";import{Primitive as Jt}from"../utils/primitive.js";import{jsx as Qt}from"react/jsx-runtime";var ce=q.forwardRef((e,t)=>{let r=n("TourTitle"),{setHasTitle:o}=r;return q.useEffect(()=>(o(!0),()=>o(!1)),[o]),Qt(Jt.h2,{id:r.titleId,...e,...Gt("tour","title",e.className),ref:t})});ce.displayName="TourTitle";import{jsx as d,jsxs as le}from"react/jsx-runtime";var Le=({showProgress:e,showSkip:t,spotlight:r,passThrough:o})=>{let u=n("Tour"),l=u.step>=u.total-1;return le(se,{children:[d(ee,{}),r?d(pe,{}):null,le(re,{...o,children:[u.activeStep?.title?d(ce,{children:u.activeStep.title}):null,u.activeStep?.description?d(oe,{children:u.activeStep.description}):null,e?d(ae,{}):null,le(j,{children:[d(ie,{children:"Back"}),d(ne,{children:l?"Done":"Next"}),t?d(ue,{children:"Skip"}):null]}),d(te,{"aria-label":"Close tour",children:"\u2715"})]})]})};import{jsx as me,jsxs as sr}from"react/jsx-runtime";var[er,n]=Ut("Tour"),tr=50;function rr(e,t,r){return[e.title,`Step ${t+1} of ${r}`].filter(Boolean).join(", ")}function Me(e){return e?typeof e=="string"?document.querySelector(e):e.current:null}function or({target:e}){let{setAnchor:t}=Zt("TourAnchor");return s.useEffect(()=>{t(e)},[e,t]),null}function nr(e,t){if(t===!1)return;let r=t===!0||t===void 0?{block:"center",inline:"center"}:t,o=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1;e.scrollIntoView?.(o?{...r,behavior:"auto"}:r)}function Ae({children:e,steps:t,open:r,defaultOpen:o=!1,onOpenChange:u,onOpenChangeComplete:l,step:T,defaultStep:G=0,onStepChange:J,onComplete:Q,onSkip:f,closeOnEscape:U=!0,closeOnInteractOutside:i=!1,preventInteraction:O=!1,spotlightPadding:g=8,spotlightRadius:m=0,keyboardNavigation:x=!1,scrollIntoView:P,targetTimeout:K=2e3,onStepTargetMissing:R,getAnnouncement:X,showProgress:Y=!0,showSkip:E=!0,spotlight:$=!0,...N}){let H=s.useRef(null),[a,D]=s.useState(null),[v,Ke]=s.useState(null),L=s.useRef(t),[k=!1,$e]=Ie({prop:r,defaultProp:o,onChange:u}),Ve=w(p=>J?.(p,L.current[p]?.id)),[c=0,fe]=Ie({prop:T,defaultProp:G,onChange:Ve});jt(k,H,l);let h=t.length,I=$e,de=w(Q),Te=w(f),ge=w(R),xe=w(X??rr),Pe=s.useRef(P);s.useEffect(()=>{L.current=t,Pe.current=P});let Fe=s.useId(),We=s.useId(),[ze,_e]=s.useState(!1),[qe,Ge]=s.useState(!1),C=s.useCallback(p=>fe(B(p,0,Math.max(h-1,0))),[fe,h]),Z=s.useCallback(()=>{I(!1),de()},[I,de]),Re=s.useCallback(()=>{I(!1),Te()},[I,Te]),Je=s.useCallback(()=>{c>=h-1?Z():C(c+1)},[c,h,Z,C]),Qe=s.useCallback(()=>C(c-1),[C,c]),ye=w(()=>{c>=h-1?Re():C(c+1)}),V=t[c],y=V?.target,[Ue,Xe]=s.useState(y);Ue!==y&&(Xe(y),D(null)),s.useEffect(()=>{if(!k||!y)return;let p=A=>{nr(A,Pe.current),D(A)},M=Me(y);if(M){p(M);return}let F=Date.now(),b=setInterval(()=>{let A=Me(y);if(A){clearInterval(b),p(A);return}Date.now()-F<K||(clearInterval(b),ge(c,L.current[c]),ye())},tr);return()=>clearInterval(b)},[k,c,y,K,ge,ye]),s.useEffect(()=>{let p=()=>Ke(a?.getBoundingClientRect()??null);if(p(),!!a)return window.addEventListener("scroll",p,!0),window.addEventListener("resize",p),()=>{window.removeEventListener("scroll",p,!0),window.removeEventListener("resize",p)}},[a]),s.useEffect(()=>{if(!k)return;let p=L.current[c];p&&Xt(xe(p,c,L.current.length))},[k,c,xe]);let Ye=s.useMemo(()=>{if(!v)return{};let p=window.innerWidth,M=window.innerHeight,F=B(v.left-g,0,p),b=B(v.top-g,0,M);return{"--skdx-tour-x":`${F}px`,"--skdx-tour-y":`${b}px`,"--skdx-tour-width":`${B(v.width+g*2,0,p-F)}px`,"--skdx-tour-height":`${B(v.height+g*2,0,M-b)}px`,"--skdx-tour-radius":`${m}px`}},[v,g,m]),ve=a!==null&&V?.type!=="dialog";return sr(Yt,{children:[me(or,{target:ve?a:null}),me(er,{steps:t,step:c,total:h,activeStep:V,open:k,anchored:ve,hasBackdrop:V?.backdrop!==!1,keyboardNavigation:x,target:a,spotlightStyle:Ye,contentRef:H,contentId:s.useId(),titleId:Fe,descriptionId:We,hasTitle:ze,setHasTitle:_e,hasDescription:qe,setHasDescription:Ge,closeOnEscape:U,closeOnInteractOutside:i,preventInteraction:O,setOpen:I,goTo:C,next:Je,prev:Qe,skip:Re,complete:Z,children:e??me(Le,{showProgress:Y,showSkip:E,spotlight:$,passThrough:N})})]})}Ae.displayName="Tour";import*as Be from"react";import{skdxPart as ir}from"../utils/part.js";import{composeEventHandlers as ar,Primitive as ur}from"../utils/primitive.js";import{jsx as cr}from"react/jsx-runtime";var pr=Be.forwardRef((e,t)=>{let r=n("TourTrigger");return cr(ur.button,{type:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":r.open?"open":"closed",...e,...ir("tour","trigger",e.className),ref:t,onClick:ar(e.onClick,()=>r.setOpen(!0))})});pr.displayName="TourTrigger";import*as Oe from"react";import{skdxPart as lr}from"../utils/part.js";import{PopperArrow as mr}from"../utils/popper.js";import{jsx as dr}from"react/jsx-runtime";var fr=Oe.forwardRef((e,t)=>n("TourArrow").anchored?dr(mr,{...e,...lr("tour","arrow",e.className),ref:t}):null);fr.displayName="TourArrow";export{Ae as Tour,j as TourActions,fr as TourArrow,ee as TourBackdrop,te as TourCloseTrigger,re as TourContent,oe as TourDescription,ne as TourNextTrigger,se as TourPortal,ie as TourPrevTrigger,ae as TourProgressText,er as TourProvider,ue as TourSkipTrigger,pe as TourSpotlight,ce as TourTitle,pr as TourTrigger,n as useTourContext};
+'use client';
+import*as s from"react";import{clamp as q}from"../utils/clamp.js";import{createSafeContext as qt}from"../utils/createContext.js";import{announce as zt}from"../utils/liveAnnouncer.js";import{PopperRoot as _t,usePopperContext as Gt}from"../utils/popper.js";import{useCallbackRef as H}from"../utils/useCallbackRef.js";import{useControllableState as Ee}from"../utils/useControllableState.js";import{useOpenChangeComplete as Qt}from"../utils/useOpenChangeComplete.js";import{Glyph as Xt}from"../utils/Glyph.js";import{skdxPart as ze}from"../utils/part.js";import{Primitive as _e}from"../utils/primitive.js";import{jsx as Ge}from"react/jsx-runtime";var Q=({ref:t,...e})=>Ge(_e.div,{...e,...ze("tour","actions",e.className),ref:t});Q.displayName="TourActions";import*as ye from"react";import{useComposedRefs as Qe}from"../utils/composeRefs.js";import{skdxPart as Ue}from"../utils/part.js";import{usePresence as Ye}from"../utils/presence.js";import{Primitive as Ze}from"../utils/primitive.js";import{jsx as je}from"react/jsx-runtime";var U=({forceMount:t,ref:e,...o})=>{let r=n("TourBackdrop"),i=ye.useRef(null),m=Qe(e,i),P=Ye(r.open,i);return r.hasBackdrop&&(t||P)?je(Ze.div,{"aria-hidden":"true","data-state":r.open?"open":"closed",...o,...Ue("tour","backdrop",o.className),ref:m,style:{...r.spotlightStyle,...o.style}}):null};U.displayName="TourBackdrop";import{skdxPart as et}from"../utils/part.js";import{composeEventHandlers as tt,Primitive as ot}from"../utils/primitive.js";import{jsx as rt}from"react/jsx-runtime";var Y=({ref:t,...e})=>{let o=n("TourCloseTrigger");return rt(ot.button,{type:"button",...e,...et("tour","close-trigger",e.className),ref:t,onClick:tt(e.onClick,()=>o.skip())})};Y.displayName="TourCloseTrigger";import*as _ from"react";import{useComposedRefs as nt}from"../utils/composeRefs.js";import{directionalKey as st}from"../utils/direction.js";import{autoFocusEvent as it}from"../utils/dismissal.js";import{skdxPart as xe}from"../utils/part.js";import{PopperContent as he}from"../utils/popper.js";import{usePresence as at}from"../utils/presence.js";import{composeEventHandlers as Se}from"../utils/primitive.js";import{useCallbackRef as pt}from"../utils/useCallbackRef.js";import{useDismiss as ut}from"../utils/useDismiss.js";import{useFocusTrap as ct}from"../utils/useFocusTrap.js";import{useOutsideInert as lt}from"../utils/useOutsideInert.js";import{jsx as ke}from"react/jsx-runtime";function mt(t){if(!(t instanceof HTMLElement))return!1;if(t.isContentEditable||t.getAttribute("role")==="textbox")return!0;let e=t.localName;return e==="input"||e==="textarea"||e==="select"}function Ce(t,e,o,r,i){return{"aria-modal":i||void 0,"aria-labelledby":t.hasTitle?t.titleId:void 0,"aria-describedby":t.hasDescription?t.descriptionId:void 0,id:t.contentId,tabIndex:-1,"data-state":e?"open":"closed","data-step":o,"data-type":r?.type,"data-backdrop":t.hasBackdrop?"":void 0,"data-keyboard-navigation":t.keyboardNavigation?"":void 0}}var Z=({forceMount:t,onEscapeKeyDown:e,onPointerDownOutside:o,onFocusOutside:r,onInteractOutside:i,onOpenAutoFocus:m,onCloseAutoFocus:P,side:L,align:M,sideOffset:V=8,ref:B,...f})=>{let u=n("TourContent"),v=nt(B,u.contentRef),K=at(u.open,u.contentRef),{open:c,step:T,activeStep:x,anchored:b,contentRef:g,closeOnEscape:$,closeOnInteractOutside:F}=u,h=c&&u.preventInteraction;ct(g,c,{onOpenAutoFocus:m,onCloseAutoFocus:P}),lt(g,h);let N=pt(a=>m?.(a)),S=_.useRef(null);_.useEffect(()=>{if(!c){S.current=null;return}let a=S.current;S.current=T,!(a===null||a===T)&&it("open-auto-focus",N)&&g.current?.focus({preventScroll:!0})},[c,T,g,N]);let w=a=>{if(!u.keyboardNavigation||a.defaultPrevented||a.altKey||a.ctrlKey||a.metaKey||mt(a.target))return;let R=st(a.key,a.currentTarget);if(R==="ArrowRight")u.next();else if(R==="ArrowLeft")u.prev();else return;a.preventDefault()};return ut({enabled:c,onEscapeKeyDown:a=>{e?.(a),!(a.defaultPrevented||!$)&&u.skip()},onInteractOutside:i,onPointerDownOutside:a=>{o?.(a),!(a.defaultPrevented||!F)&&u.skip()},onFocusOutside:r},[g]),t||K?b?ke(he,{component:"tour",role:"dialog",...Ce(u,c,T,x,h),side:x?.placement??L,align:x?.align??M,sideOffset:V,...f,...xe("tour","content",f.className),ref:v,onKeyDown:Se(f.onKeyDown,w)}):ke(he,{component:"tour",role:"dialog",...Ce(u,c,T,x,h),"data-centered":"","data-side":void 0,"data-align":void 0,...f,...xe("tour","content",f.className),ref:v,onKeyDown:Se(f.onKeyDown,w),style:{position:void 0,left:void 0,top:void 0,transform:void 0,...f.style}}):null};Z.displayName="TourContent";import*as ve from"react";import{skdxPart as ft}from"../utils/part.js";import{Primitive as dt}from"../utils/primitive.js";import{jsx as Tt}from"react/jsx-runtime";var j=({ref:t,...e})=>{let o=n("TourDescription"),{setHasDescription:r}=o;return ve.useEffect(()=>(r(!0),()=>r(!1)),[r]),Tt(dt.p,{id:o.descriptionId,...e,...ft("tour","description",e.className),ref:t})};j.displayName="TourDescription";import{skdxPart as gt}from"../utils/part.js";import{composeEventHandlers as Pt,Primitive as Rt}from"../utils/primitive.js";import{jsx as yt}from"react/jsx-runtime";var ee=({ref:t,...e})=>{let o=n("TourNextTrigger"),r=o.step>=o.total-1;return yt(Rt.button,{type:"button","data-last":r?"":void 0,...e,...gt("tour","next-trigger",e.className),ref:t,onClick:Pt(e.onClick,()=>o.next())})};ee.displayName="TourNextTrigger";import{Portal as xt}from"../utils/portal.js";import{usePresence as ht}from"../utils/presence.js";import{jsx as St}from"react/jsx-runtime";var te=({forceMount:t,children:e,...o})=>{let r=n("TourPortal"),i=ht(r.open,r.contentRef);return t||i?St(xt,{...o,children:e}):null};te.displayName="TourPortal";import{skdxPart as Ct}from"../utils/part.js";import{composeEventHandlers as kt,Primitive as vt}from"../utils/primitive.js";import{jsx as bt}from"react/jsx-runtime";var oe=({ref:t,...e})=>{let o=n("TourPrevTrigger"),r=e.disabled||o.step===0;return bt(vt.button,{type:"button",...e,disabled:r,"data-disabled":r?"":void 0,...Ct("tour","prev-trigger",e.className),ref:t,onClick:kt(e.onClick,()=>o.prev())})};oe.displayName="TourPrevTrigger";import{skdxPart as Nt}from"../utils/part.js";import{Primitive as wt}from"../utils/primitive.js";import{jsx as It}from"react/jsx-runtime";function Et(t,e){return`Step ${t+1} of ${e}`}var re=({format:t=Et,children:e,ref:o,...r})=>{let i=n("TourProgressText");return It(wt.p,{"data-step":i.step,"data-total":i.total,...r,...Nt("tour","progress-text",r.className),ref:o,children:e??t(i.step,i.total)})};re.displayName="TourProgressText";import{skdxPart as At}from"../utils/part.js";import{composeEventHandlers as Ot,Primitive as Dt}from"../utils/primitive.js";import{jsx as Ht}from"react/jsx-runtime";var ne=({ref:t,...e})=>{let o=n("TourSkipTrigger");return Ht(Dt.button,{type:"button",...e,...At("tour","skip-trigger",e.className),ref:t,onClick:Ot(e.onClick,()=>o.skip())})};ne.displayName="TourSkipTrigger";import*as be from"react";import{useComposedRefs as Lt}from"../utils/composeRefs.js";import{skdxPart as Mt}from"../utils/part.js";import{usePresence as Vt}from"../utils/presence.js";import{Primitive as Bt}from"../utils/primitive.js";import{jsx as Kt}from"react/jsx-runtime";var se=({forceMount:t,ref:e,...o})=>{let r=n("TourSpotlight"),i=be.useRef(null),m=Lt(e,i),P=Vt(r.open,i);return r.target&&(t||P)?Kt(Bt.div,{"aria-hidden":"true","data-state":r.open?"open":"closed",...o,...Mt("tour","spotlight",o.className),ref:m,style:{...r.spotlightStyle,...o.style}}):null};se.displayName="TourSpotlight";import*as Ne from"react";import{skdxPart as $t}from"../utils/part.js";import{Primitive as Ft}from"../utils/primitive.js";import{jsx as Jt}from"react/jsx-runtime";var ie=({ref:t,...e})=>{let o=n("TourTitle"),{setHasTitle:r}=o;return Ne.useEffect(()=>(r(!0),()=>r(!1)),[r]),Jt(Ft.h2,{id:o.titleId,...e,...$t("tour","title",e.className),ref:t})};ie.displayName="TourTitle";import{jsx as d,jsxs as ae}from"react/jsx-runtime";var Wt=()=>d(Xt,{name:"close"}),we=({showProgress:t,showSkip:e,spotlight:o,passThrough:r})=>{let i=n("Tour"),m=i.step>=i.total-1;return ae(te,{children:[d(U,{}),o?d(se,{}):null,ae(Z,{...r,children:[i.activeStep?.title?d(ie,{children:i.activeStep.title}):null,i.activeStep?.description?d(j,{children:i.activeStep.description}):null,t?d(re,{}):null,ae(Q,{children:[d(oe,{children:"Back"}),d(ee,{children:m?"Done":"Next"}),e?d(ne,{children:"Skip"}):null,d(Y,{"aria-label":"Close tour",children:d(Wt,{})})]})]})]})};import{jsx as pe,jsxs as oo}from"react/jsx-runtime";var[Ut,n]=qt("Tour"),Yt=50;function Zt(t,e,o){return[t.title,`Step ${e+1} of ${o}`].filter(Boolean).join(", ")}function Ie(t){return t?typeof t=="string"?document.querySelector(t):t.current:null}function jt({target:t}){let{setAnchor:e}=Gt("TourAnchor");return s.useEffect(()=>{e(t)},[t,e]),null}function eo(t,e){if(e===!1)return;let o=e===!0||e===void 0?{block:"center",inline:"center"}:e,r=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1;t.scrollIntoView?.(r?{...o,behavior:"auto"}:o)}function to(t){let{children:e,steps:o,open:r,defaultOpen:i=!1,onOpenChange:m,onOpenChangeComplete:P,step:L,defaultStep:M=0,onStepChange:V,onComplete:B,onSkip:f,closeOnEscape:u=!0,closeOnInteractOutside:v=!1,preventInteraction:K=!1,spotlightPadding:c=8,spotlightRadius:T=0,keyboardNavigation:x=!1,scrollIntoView:b,targetTimeout:g=2e3,onStepTargetMissing:$,getAnnouncement:F,showProgress:h=!0,showSkip:N=!0,spotlight:S=!0,...w}=t;return{children:e,steps:o,openProp:r,defaultOpen:i,onOpenChange:m,onOpenChangeComplete:P,stepProp:L,defaultStep:M,onStepChange:V,onComplete:B,onSkip:f,closeOnEscape:u,closeOnInteractOutside:v,preventInteraction:K,spotlightPadding:c,spotlightRadius:T,keyboardNavigation:x,scrollIntoView:b,targetTimeout:g,onStepTargetMissing:$,getAnnouncement:F,showProgress:h,showSkip:N,spotlight:S,passThrough:w}}function Ae(t){let{children:e,steps:o,openProp:r,defaultOpen:i,onOpenChange:m,onOpenChangeComplete:P,stepProp:L,defaultStep:M,onStepChange:V,onComplete:B,onSkip:f,closeOnEscape:u,closeOnInteractOutside:v,preventInteraction:K,spotlightPadding:c,spotlightRadius:T,keyboardNavigation:x,scrollIntoView:b,targetTimeout:g,onStepTargetMissing:$,getAnnouncement:F,showProgress:h,showSkip:N,spotlight:S,passThrough:w}=to(t),a=s.useRef(null),[R,ue]=s.useState(null),[E,Oe]=s.useState(null),J=s.useRef(o),[I=!1,De]=Ee({prop:r,defaultProp:i,onChange:m}),He=H(p=>V?.({index:p,id:J.current[p]?.id})),[l=0,ce]=Ee({prop:L,defaultProp:M,onChange:He});Qt(I,a,P);let A=o.length,X=De,le=H(B),me=H(f),fe=H($),de=H(F??Zt),Te=s.useRef(b);s.useEffect(()=>{J.current=o,Te.current=b});let Le=s.useId(),Me=s.useId(),[Ve,Be]=s.useState(!1),[Ke,$e]=s.useState(!1),O=s.useCallback(p=>ce(q(p,0,Math.max(A-1,0))),[ce,A]),G=s.useCallback(()=>{X(!1),le()},[X,le]),ge=s.useCallback(()=>{X(!1),me()},[X,me]),Fe=s.useCallback(()=>{l>=A-1?G():O(l+1)},[l,A,G,O]),Je=s.useCallback(()=>O(l-1),[O,l]),Pe=H(()=>{l>=A-1?ge():O(l+1)}),z=o[l],C=z?.target,[Xe,We]=s.useState(C);Xe!==C&&(We(C),ue(null)),s.useEffect(()=>{if(!I||!C)return;let p=W=>{eo(W,Te.current),ue(W)},y=Ie(C);if(y){p(y);return}let k=Date.now(),D=setInterval(()=>{let W=Ie(C);if(W){clearInterval(D),p(W);return}Date.now()-k<g||(clearInterval(D),fe({index:l,step:J.current[l]}),Pe())},Yt);return()=>clearInterval(D)},[I,l,C,g,fe,Pe]),s.useEffect(()=>{let p=()=>Oe(R?.getBoundingClientRect()??null);if(p(),!R)return;let y=0,k=()=>{cancelAnimationFrame(y),y=requestAnimationFrame(p)};return window.addEventListener("scroll",k,{passive:!0,capture:!0}),window.addEventListener("resize",p),()=>{cancelAnimationFrame(y),window.removeEventListener("scroll",k,{capture:!0}),window.removeEventListener("resize",p)}},[R]),s.useEffect(()=>{if(!I)return;let p=J.current[l];p&&zt(de(p,l,J.current.length))},[I,l,de]);let qe=s.useMemo(()=>{if(!E)return{};let p=window.innerWidth,y=window.innerHeight,k=q(E.left-c,0,p),D=q(E.top-c,0,y);return{"--skdx-tour-x":`${k}px`,"--skdx-tour-y":`${D}px`,"--skdx-tour-width":`${q(E.width+c*2,0,p-k)}px`,"--skdx-tour-height":`${q(E.height+c*2,0,y-D)}px`,"--skdx-tour-radius":`${T}px`}},[E,c,T]),Re=R!==null&&z?.type!=="dialog";return oo(_t,{children:[pe(jt,{target:Re?R:null}),pe(Ut,{steps:o,step:l,total:A,activeStep:z,open:I,anchored:Re,hasBackdrop:z?.backdrop!==!1,keyboardNavigation:x,target:R,spotlightStyle:qe,contentRef:a,contentId:s.useId(),titleId:Le,descriptionId:Me,hasTitle:Ve,setHasTitle:Be,hasDescription:Ke,setHasDescription:$e,closeOnEscape:u,closeOnInteractOutside:v,preventInteraction:K,setOpen:X,goTo:O,next:Fe,prev:Je,skip:ge,complete:G,children:e??pe(we,{showProgress:h,showSkip:N,spotlight:S,passThrough:w})})]})}Ae.displayName="Tour";import{skdxPart as ro}from"../utils/part.js";import{composeEventHandlers as no,Primitive as so}from"../utils/primitive.js";import{jsx as ao}from"react/jsx-runtime";var io=({ref:t,...e})=>{let o=n("TourTrigger");return ao(so.button,{type:"button","aria-haspopup":"dialog","aria-expanded":o.open,"aria-controls":o.contentId,"data-state":o.open?"open":"closed",...e,...ro("tour","trigger",e.className),ref:t,onClick:no(e.onClick,()=>o.setOpen(!0))})};io.displayName="TourTrigger";import{skdxPart as po}from"../utils/part.js";import{PopperArrow as uo}from"../utils/popper.js";import{jsx as lo}from"react/jsx-runtime";var co=({ref:t,...e})=>n("TourArrow").anchored?lo(uo,{...e,...po("tour","arrow",e.className),ref:t}):null;co.displayName="TourArrow";export{Ae as Tour,Q as TourActions,co as TourArrow,U as TourBackdrop,Y as TourCloseTrigger,Z as TourContent,j as TourDescription,ee as TourNextTrigger,te as TourPortal,oe as TourPrevTrigger,re as TourProgressText,Ut as TourProvider,ne as TourSkipTrigger,se as TourSpotlight,ie as TourTitle,io as TourTrigger,n as useTourContext};

package/dist/tour/TourActions.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TourActionsProps } from './types.cjs';
 /**
  * Container for tour navigation triggers — no role or label (buttons inside name themselves).
@@ -17,4 +17,7 @@ import type { TourActionsProps } from './types.cjs';
  * </TourContent>
  * ```
  */
-export declare const TourActions: React.ForwardRefExoticComponent<Omit<TourActionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TourActions: {
+    ({ ref: forwardedRef, ...props }: TourActionsProps): React.ReactNode;
+    displayName: string;
+};

package/dist/tour/TourActions.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TourActionsProps } from './types.js';
 /**
  * Container for tour navigation triggers — no role or label (buttons inside name themselves).
@@ -17,4 +17,7 @@ import type { TourActionsProps } from './types.js';
  * </TourContent>
  * ```
  */
-export declare const TourActions: React.ForwardRefExoticComponent<Omit<TourActionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TourActions: {
+    ({ ref: forwardedRef, ...props }: TourActionsProps): React.ReactNode;
+    displayName: string;
+};