@skdx/react 0.28.0 → 0.30.0

package/dist/floating-panel/FloatingPanel.d.ts

@@ -4,37 +4,14 @@ import type { FloatingPanelContextValue, FloatingPanelGeometry, FloatingPanelGes
  * Default release announcement for {@link FloatingPanelProps.getGestureAnnouncement}.
  */
 export declare function gestureAnnouncement(gesture: FloatingPanelGesture, { position, size }: FloatingPanelGeometry): string;
-export declare const FloatingPanelProvider: {
-    (props: FloatingPanelContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useFloatingPanelContext: (consumerName: string) => FloatingPanelContextValue;
+export declare const FloatingPanelProvider: React.FC<FloatingPanelContextValue & {
+    children: React.ReactNode;
+}>, useFloatingPanelContext: (consumerName: string) => FloatingPanelContextValue;
 /** Props for {@link FloatingPanelRoot}: {@link FloatingPanelProps} minus the derived-anatomy-only props. */
 export type FloatingPanelRootProps = Omit<FloatingPanelProps, 'title' | 'stages' | 'dismissible'>;
 /**
- * FloatingPanel's state/context primitive: owns open state, position, size and
- * stage, and hands them down to `FloatingPanelTrigger` /
- * `FloatingPanelPortal` / `FloatingPanelContent` / `FloatingPanelHeader` /
- * `FloatingPanelTitle` / `FloatingPanelCloseTrigger` /
- * `FloatingPanelResizeTrigger` / `FloatingPanelStageTrigger` via context,
- * rendering `children` verbatim. Renders no DOM element itself.
- *
- * Non-modal is not a default here, it is the point: there is no backdrop, no
- * focus trap, and no scroll lock, so the page behind the panel stays fully
- * usable while it is open. Focus still returns to the trigger on close, but
- * only when it would otherwise be stranded.
- *
- * Every open/position/size/stage prop works controlled or uncontrolled.
- *
- * Geometry is reported on two channels, not one: `onPositionChange` /
- * `onSizeChange` fire per frame, for painting; `onPositionCommit` /
- * `onSizeCommit` fire once, when the gesture settles, for persisting.
- *
- * `FloatingPanel` (the recipe, below) wraps this with `FloatingPanelAnatomy`
- * and always derives from `title`/`stages`/`dismissible`/`resizable`. Reach
- * for this directly — via `@skdx/react/primitives/floating-panel`'s `FloatingPanelRoot` —
- * for full manual composition of the parts.
+ * FloatingPanel's state/context primitive: owns open state, position, size
+ * and stage, and renders `children` verbatim with no DOM element of its own.
  *
  * @example
  * ```tsx
@@ -59,24 +36,8 @@ export declare namespace FloatingPanelRoot {
     var displayName: string;
 }
 /**
- * A draggable, resizable, **non-modal** floating panel — the movable window
- * pattern. Owns open state, position, size and stage, all of them controlled
- * or uncontrolled.
- *
- * Always draws the derived anatomy: the portal, the movable surface, a header
- * holding the derived `title`, one stage button per `stages` entry and a close
- * button when `dismissible`, the body (`children`), and a south-east resize
- * grip while `resizable`. `children` is the panel's body, never a switch —
- * this component never inspects what it was given. For full manual
- * composition of the parts, use `FloatingPanelRoot` from
- * `@skdx/react/primitives/floating-panel` instead of this recipe.
- *
- * There is no derived trigger: you drive `open` yourself, exactly as with
- * `Dialog` and `Drawer`. `FloatingPanelTrigger` is a primitive for the panels that want one.
- *
- * Geometry is reported on two channels, not one: `onPositionChange` /
- * `onSizeChange` fire per frame, for painting; `onPositionCommit` /
- * `onSizeCommit` fire once, when the gesture settles, for persisting.
+ * A draggable, resizable, non-modal floating panel — the movable window
+ * pattern — deriving its header, stage buttons, close button and resize grip.
  *
  * @example
  * ```tsx
@@ -89,23 +50,6 @@ export declare namespace FloatingPanelRoot {
  *   <LayerList />
  * </FloatingPanel>
  * ```
- *
- * @example Full manual composition, for anything the derived anatomy can't express — `@skdx/react/primitives/floating-panel`.
- * ```tsx
- * import { FloatingPanelContent, FloatingPanelHeader, FloatingPanelPortal, FloatingPanelResizeTrigger, FloatingPanelRoot, FloatingPanelTitle, FloatingPanelTrigger } from '@skdx/react/primitives/floating-panel';
- *
- * <FloatingPanelRoot>
- *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
- *   <FloatingPanelPortal>
- *     <FloatingPanelContent>
- *       <FloatingPanelHeader aria-label="Drag to move panel">
- *         <FloatingPanelTitle>Inspector</FloatingPanelTitle>
- *       </FloatingPanelHeader>
- *       <FloatingPanelResizeTrigger direction="se" aria-label="Resize panel" />
- *     </FloatingPanelContent>
- *   </FloatingPanelPortal>
- * </FloatingPanelRoot>
- * ```
  */
 export declare function FloatingPanel({ children, title, stages, dismissible, resizable, open, defaultOpen, onOpenChange, onOpenChangeComplete, position, defaultPosition, onPositionChange, onPositionCommit, size, defaultSize, onSizeChange, onSizeCommit, minSize, maxSize, boundary, stage, defaultStage, onStageChange, draggable, step, disabled, getGestureAnnouncement, ...rest }: FloatingPanelProps): React.JSX.Element;
 export declare namespace FloatingPanel {

package/dist/floating-panel/FloatingPanel.js

@@ -1 +1,2 @@
-import*as u from"react";import{clamp as V}from"../utils/clamp.js";import{createSafeContext as ct}from"../utils/createContext.js";import{announce as mt}from"../utils/liveAnnouncer.js";import{useCallbackRef as se}from"../utils/useCallbackRef.js";import{useControllableState as q}from"../utils/useControllableState.js";import{useOpenChangeComplete as ut}from"../utils/useOpenChangeComplete.js";import*as me from"react";import{skdxPart as Se}from"../utils/part.js";import{composeEventHandlers as Ae,Primitive as Le}from"../utils/primitive.js";import{jsx as ke}from"react/jsx-runtime";var te=me.forwardRef((e,a)=>{let t=p("FloatingPanelCloseTrigger");return ke(Le.button,{type:"button",...e,...Se("floating-panel","close-trigger",e.className),ref:a,onClick:Ae(e.onClick,()=>t.onOpenChange(!1))})});te.displayName="FloatingPanelCloseTrigger";import*as $ from"react";import{useComposedRefs as Ne}from"../utils/composeRefs.js";import{skdxPart as Oe}from"../utils/part.js";import{usePresence as Ue}from"../utils/presence.js";import{Primitive as Ke}from"../utils/primitive.js";import{useDismiss as Be}from"../utils/useDismiss.js";import{jsx as _e}from"react/jsx-runtime";var ne=$.forwardRef(({forceMount:e,onEscapeKeyDown:a,onPointerDownOutside:t,onFocusOutside:n,onInteractOutside:o,style:h,...g},y)=>{let r=p("FloatingPanelContent"),b=Ne(y,r.contentRef),{setContentPresent:R}=r,T=Ue(r.open,r.contentRef);if($.useEffect(()=>{R(T)},[T,R]),$.useEffect(()=>()=>R(!1),[R]),Be({enabled:r.open,onEscapeKeyDown:P=>{a?.(P),P.defaultPrevented||r.onOpenChange(!1)},onInteractOutside:o,onPointerDownOutside:P=>{t?.(P),P.defaultPrevented||r.onOpenChange(!1)},onFocusOutside:n},[r.contentRef,r.triggerRef]),!e&&!T)return null;let{position:C,size:i,stage:l}=r,c=l==="maximized"?{x:"0px",y:"0px",width:"100%",height:"100%"}:{x:`${C.x}px`,y:`${C.y}px`,width:`${i.width}px`,height:l==="minimized"?"auto":`${i.height}px`};return _e(Ke.div,{role:"dialog","aria-modal":!1,"aria-labelledby":r.hasTitle?r.titleId:void 0,id:r.contentId,"data-state":r.open?"open":"closed","data-stage":l,"data-dragging":r.dragging?"":void 0,"data-resizing":r.resizing?"":void 0,"data-disabled":r.disabled?"":void 0,...g,...Oe("floating-panel","content",g.className),ref:b,style:{"--skdx-floating-panel-x":c.x,"--skdx-floating-panel-y":c.y,"--skdx-floating-panel-width":c.width,"--skdx-floating-panel-height":c.height,...h}})});ne.displayName="FloatingPanelContent";import*as G from"react";import{directionalKey as Ye,useDirection as $e}from"../utils/direction.js";import{skdxPart as Ge}from"../utils/part.js";import{composeEventHandlers as N,Primitive as Xe}from"../utils/primitive.js";import{jsx as Ze}from"react/jsx-runtime";var Ve=10,oe=G.forwardRef(({style:e,...a},t)=>{let n=p("FloatingPanelHeader"),o=$e(),h=G.useRef(null),g=G.useRef(!1),y=n.draggable&&!n.disabled,r=i=>{y&&(i.currentTarget.setPointerCapture?.(i.pointerId),h.current={x:i.clientX,y:i.clientY},n.setDragging(!0))},b=i=>{let l=h.current;!y||!l||(n.moveBy(i.clientX-l.x,i.clientY-l.y),h.current={x:i.clientX,y:i.clientY})},R=i=>{h.current&&(i.currentTarget.releasePointerCapture?.(i.pointerId),h.current=null,n.setDragging(!1),n.announceRelease("move"))},T=i=>{if(!y)return;let l=n.step*(i.shiftKey?Ve:1),c=Ye(i.key,i.currentTarget,o),P=c==="ArrowLeft"?{dx:-l,dy:0}:c==="ArrowRight"?{dx:l,dy:0}:c==="ArrowUp"?{dx:0,dy:-l}:c==="ArrowDown"?{dx:0,dy:l}:null;P&&(i.preventDefault(),g.current=!0,n.moveBy(P.dx,P.dy))},C=()=>{g.current&&(g.current=!1,n.announceRelease("move"))};return Ze(Xe.div,{"aria-disabled":n.disabled||void 0,"aria-keyshortcuts":n.draggable?"ArrowUp ArrowDown ArrowLeft ArrowRight":void 0,"data-dragging":n.dragging?"":void 0,"data-disabled":n.disabled?"":void 0,tabIndex:n.draggable?0:void 0,...a,...Ge("floating-panel","header",a.className),ref:t,onPointerDown:N(a.onPointerDown,r),onPointerMove:N(a.onPointerMove,b),onPointerUp:N(a.onPointerUp,R),onPointerCancel:N(a.onPointerCancel,R),onKeyDown:N(a.onKeyDown,T),onKeyUp:N(a.onKeyUp,C),style:{touchAction:"none",cursor:y?"move":void 0,...e}})});oe.displayName="FloatingPanelHeader";import{Portal as We}from"../utils/portal.js";import{jsx as qe}from"react/jsx-runtime";var ae=({forceMount:e,children:a,...t})=>{let n=p("FloatingPanelPortal");return e||n.open||n.contentPresent?qe(We,{...t,children:a}):null};ae.displayName="FloatingPanelPortal";import*as X from"react";import{directionalKey as Je,useDirection as Qe}from"../utils/direction.js";import{skdxPart as je}from"../utils/part.js";import{composeEventHandlers as O,Primitive as et}from"../utils/primitive.js";import{jsx as nt}from"react/jsx-runtime";var tt=10,ie=X.forwardRef(({direction:e,style:a,...t},n)=>{let o=p("FloatingPanelResizeTrigger"),h=Qe(),g=X.useRef(null),y=X.useRef(!1),r=o.resizable&&!o.disabled,b=e.includes("e")||e.includes("w"),R=b?o.size.width:o.size.height,T=b?o.minSize.width:o.minSize.height,C=b?o.maxSize.width:o.maxSize.height,i=o.bounds?b?o.bounds.width-o.position.x:o.bounds.height-o.position.y:Number.POSITIVE_INFINITY,l=Math.max(T,Math.min(C,i)),c=e==="e"||e==="w"?"vertical":e==="n"||e==="s"?"horizontal":void 0,P=d=>{r&&(d.currentTarget.setPointerCapture?.(d.pointerId),g.current={x:d.clientX,y:d.clientY},o.setResizing(!0))},U=d=>{let F=g.current;!r||!F||(o.resizeBy(e,d.clientX-F.x,d.clientY-F.y),g.current={x:d.clientX,y:d.clientY})},I=d=>{g.current&&(d.currentTarget.releasePointerCapture?.(d.pointerId),g.current=null,o.setResizing(!1),o.announceRelease("resize"))},H=d=>{if(!r)return;let F=o.step*(d.shiftKey?tt:1),v=Je(d.key,d.currentTarget,h),E=v==="ArrowLeft"?{dx:-F,dy:0}:v==="ArrowRight"?{dx:F,dy:0}:v==="ArrowUp"?{dx:0,dy:-F}:v==="ArrowDown"?{dx:0,dy:F}:null;E&&(d.preventDefault(),y.current=!0,o.resizeBy(e,E.dx,E.dy))},S=()=>{y.current&&(y.current=!1,o.announceRelease("resize"))};return nt(et.div,{role:"separator","aria-orientation":c,"aria-valuenow":Math.round(R),"aria-valuemin":Math.round(T),"aria-valuemax":Number.isFinite(l)?Math.round(l):void 0,"aria-disabled":o.disabled||void 0,"aria-keyshortcuts":o.resizable?"ArrowUp ArrowDown ArrowLeft ArrowRight":void 0,"data-direction":e,"data-resizing":o.resizing?"":void 0,"data-disabled":o.disabled?"":void 0,tabIndex:o.resizable?0:void 0,...t,...je("floating-panel","resize-trigger",t.className),ref:n,onPointerDown:O(t.onPointerDown,P),onPointerMove:O(t.onPointerMove,U),onPointerUp:O(t.onPointerUp,I),onPointerCancel:O(t.onPointerCancel,I),onKeyDown:O(t.onKeyDown,H),onKeyUp:O(t.onKeyUp,S),style:{touchAction:"none",cursor:r?`${e}-resize`:void 0,...a}})});ie.displayName="FloatingPanelResizeTrigger";import*as ue from"react";import{skdxPart as ot}from"../utils/part.js";import{composeEventHandlers as at,Primitive as it}from"../utils/primitive.js";import{jsx as rt}from"react/jsx-runtime";var re=ue.forwardRef(({stage:e,...a},t)=>{let n=p("FloatingPanelStageTrigger"),o=n.stage===e;return rt(it.button,{type:"button","aria-pressed":o,"aria-disabled":n.disabled||void 0,"data-stage":n.stage,"data-state":o?"on":"off","data-disabled":n.disabled?"":void 0,...a,...ot("floating-panel","stage-trigger",a.className),ref:t,onClick:at(a.onClick,()=>{n.disabled||n.onStageChange(o?"default":e)})})});re.displayName="FloatingPanelStageTrigger";import*as W from"react";import{skdxPart as lt}from"../utils/part.js";import{Primitive as st}from"../utils/primitive.js";import{jsx as gt}from"react/jsx-runtime";var le=W.forwardRef((e,a)=>{let t=p("FloatingPanelTitle"),{setHasTitle:n}=t;return W.useEffect(()=>(n(!0),()=>n(!1)),[n]),gt(st.h2,{id:t.titleId,...e,...lt("floating-panel","title",e.className),ref:a})});le.displayName="FloatingPanelTitle";import{jsx as M,jsxs as fe}from"react/jsx-runtime";var dt=()=>M("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false",children:M("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})}),pe=({title:e,stages:a=[],dismissible:t,resizable:n,children:o,passThrough:h})=>M(ae,{children:fe(ne,{...h,children:[fe(oe,{"aria-label":"Drag to move panel",children:[e?M(le,{children:e}):null,a.map(g=>M(re,{stage:g.stage,children:g.label},g.stage)),t?M(te,{"aria-label":"Close",children:M(dt,{})}):null]}),o,n?M(ie,{direction:"se","aria-label":"Resize panel"}):null]})});import{jsx as de}from"react/jsx-runtime";function he(e,{position:a,size:t}){return e==="move"?`Panel moved to ${a.x}, ${a.y}`:`Panel resized to ${t.width} by ${t.height}`}var[ft,p]=ct("FloatingPanel"),pt={x:0,y:0},ht={width:320,height:240},Pt={width:160,height:120},yt={width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY};function ge(e){let a=e?.current;if(a){let t=a.getBoundingClientRect();return{width:t.width,height:t.height}}return{width:window.innerWidth,height:window.innerHeight}}function J(e,a,t,n){return V(e,a,Math.max(a,Math.min(t,n)))}function Pe({children:e,open:a,defaultOpen:t=!1,onOpenChange:n,onOpenChangeComplete:o,position:h,defaultPosition:g=pt,onPositionChange:y,onPositionCommit:r,size:b,defaultSize:R=ht,onSizeChange:T,onSizeCommit:C,minSize:i=Pt,maxSize:l=yt,boundary:c,stage:P,defaultStage:U="default",onStageChange:I,draggable:H=!0,resizable:S=!0,step:d=10,disabled:F=!1,getGestureAnnouncement:v}){let E=u.useRef(null),K=u.useRef(null),[Q,j]=u.useState(!1),[Fe,xe]=u.useState(!1),[we,be]=u.useState(!1),[Te,Ce]=u.useState(!1),[D,ze]=u.useState(null),[A=!1,ve]=q({prop:a,defaultProp:t,onChange:n}),[f=g,Z]=q({prop:h,defaultProp:g,onChange:y}),[m=R,ee]=q({prop:b,defaultProp:R,onChange:T}),[Ee="default",Me]=q({prop:P,defaultProp:U,onChange:I});ut(A,K,o),u.useEffect(()=>{let s=()=>ze(ge(c));s();let w=c?.current;if(w&&typeof ResizeObserver<"u"){let x=new ResizeObserver(s);return x.observe(w),()=>x.disconnect()}return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[c]),u.useEffect(()=>{if(!D)return;let s=Math.min(m.width,Math.max(i.width,D.width)),w=Math.min(m.height,Math.max(i.height,D.height));(s!==m.width||w!==m.height)&&ee({width:s,height:w});let x=V(f.x,0,Math.max(0,D.width-s)),z=V(f.y,0,Math.max(0,D.height-w));(x!==f.x||z!==f.y)&&Z({x,y:z})},[D,m,i,f,ee,Z]);let ce=u.useRef(A);u.useEffect(()=>{if(ce.current&&!A){let s=document.activeElement;(!s||s===document.body||K.current?.contains(s))&&E.current?.focus()}ce.current=A},[A]);let De=se((s,w)=>{if(F||!H)return;let x=ge(c),z={x:V(f.x+s,0,Math.max(0,x.width-m.width)),y:V(f.y+w,0,Math.max(0,x.height-m.height))};(z.x!==f.x||z.y!==f.y)&&Z(z)}),Ie=se((s,w,x)=>{if(F||!S)return;let z=ge(c),{x:B,y:_}=f,{width:L,height:k}=m;if(s.includes("e")&&(L=J(m.width+w,i.width,l.width,z.width-B)),s.includes("w")){let Y=B+L;L=J(m.width-w,i.width,l.width,Y),B=Y-L}if(s.includes("s")&&(k=J(m.height+x,i.height,l.height,z.height-_)),s.includes("n")){let Y=_+k;k=J(m.height-x,i.height,l.height,Y),_=Y-k}(L!==m.width||k!==m.height)&&ee({width:L,height:k}),(B!==f.x||_!==f.y)&&Z({x:B,y:_})}),He=se(s=>{s==="resize"&&C?.(m),r?.(f);let w={position:{x:Math.round(f.x),y:Math.round(f.y)},size:{width:Math.round(m.width),height:Math.round(m.height)}},x=(v??he)(s,w);x&&mt(x)});return de(ft,{triggerRef:E,contentRef:K,contentId:u.useId(),titleId:u.useId(),hasTitle:Te,setHasTitle:Ce,open:A,onOpenChange:ve,position:f,size:m,minSize:i,maxSize:l,bounds:D,stage:Ee,onStageChange:Me,moveBy:De,resizeBy:Ie,announceRelease:He,draggable:H,resizable:S,disabled:F,step:d,dragging:Q,setDragging:j,resizing:Fe,setResizing:xe,contentPresent:we,setContentPresent:be,children:e})}Pe.displayName="FloatingPanelRoot";function ye({children:e,title:a,stages:t,dismissible:n=!0,resizable:o=!0,open:h,defaultOpen:g,onOpenChange:y,onOpenChangeComplete:r,position:b,defaultPosition:R,onPositionChange:T,onPositionCommit:C,size:i,defaultSize:l,onSizeChange:c,onSizeCommit:P,minSize:U,maxSize:I,boundary:H,stage:S,defaultStage:d,onStageChange:F,draggable:v,step:E,disabled:K,getGestureAnnouncement:Q,...j}){return de(Pe,{open:h,defaultOpen:g,onOpenChange:y,onOpenChangeComplete:r,position:b,defaultPosition:R,onPositionChange:T,onPositionCommit:C,size:i,defaultSize:l,onSizeChange:c,onSizeCommit:P,minSize:U,maxSize:I,boundary:H,stage:S,defaultStage:d,onStageChange:F,draggable:v,resizable:o,step:E,disabled:K,getGestureAnnouncement:Q,children:de(pe,{title:a,stages:t,dismissible:n,resizable:o,passThrough:j,children:e})})}ye.displayName="FloatingPanel";import*as Re from"react";import{useComposedRefs as Rt}from"../utils/composeRefs.js";import{skdxPart as Ft}from"../utils/part.js";import{composeEventHandlers as xt,Primitive as wt}from"../utils/primitive.js";import{jsx as Tt}from"react/jsx-runtime";var bt=Re.forwardRef((e,a)=>{let t=p("FloatingPanelTrigger"),n=Rt(a,t.triggerRef);return Tt(wt.button,{type:"button","aria-haspopup":"dialog","aria-expanded":t.open,"aria-controls":t.contentId,"data-state":t.open?"open":"closed",...e,...Ft("floating-panel","trigger",e.className),ref:n,onClick:xt(e.onClick,()=>t.onOpenChange(!t.open))})});bt.displayName="FloatingPanelTrigger";export{ye as FloatingPanel,te as FloatingPanelCloseTrigger,ne as FloatingPanelContent,oe as FloatingPanelHeader,ae as FloatingPanelPortal,ft as FloatingPanelProvider,ie as FloatingPanelResizeTrigger,Pe as FloatingPanelRoot,re as FloatingPanelStageTrigger,le as FloatingPanelTitle,bt as FloatingPanelTrigger,he as gestureAnnouncement,p as useFloatingPanelContext};
+'use client';
+import*as u from"react";import{clamp as X}from"../utils/clamp.js";import{createSafeContext as ut}from"../utils/createContext.js";import{announce as ft}from"../utils/liveAnnouncer.js";import{useCallbackRef as le}from"../utils/useCallbackRef.js";import{useControllableState as Y}from"../utils/useControllableState.js";import{useOpenChangeComplete as pt}from"../utils/useOpenChangeComplete.js";import{Glyph as ct}from"../utils/Glyph.js";import{skdxPart as Ie}from"../utils/part.js";import{composeEventHandlers as Se,Primitive as Me}from"../utils/primitive.js";import{jsx as Ne}from"react/jsx-runtime";var q=({ref:e,...o})=>{let n=h("FloatingPanelCloseTrigger");return Ne(Me.button,{type:"button",...o,...Ie("floating-panel","close-trigger",o.className),ref:e,onClick:Se(o.onClick,()=>n.onOpenChange(!1))})};q.displayName="FloatingPanelCloseTrigger";import*as Q from"react";import{useComposedRefs as Ae}from"../utils/composeRefs.js";import{skdxPart as He}from"../utils/part.js";import{usePresence as Oe}from"../utils/presence.js";import{Primitive as ke}from"../utils/primitive.js";import{useDismiss as Le}from"../utils/useDismiss.js";import{jsx as Ue}from"react/jsx-runtime";var j=({forceMount:e,onEscapeKeyDown:o,onPointerDownOutside:n,onFocusOutside:t,onInteractOutside:i,style:c,ref:l,...y})=>{let r=h("FloatingPanelContent"),C=Ae(l,r.contentRef),{setContentPresent:R}=r,x=Oe(r.open,r.contentRef);if(Q.useEffect(()=>{R(x)},[x,R]),Q.useEffect(()=>()=>R(!1),[R]),Le({enabled:r.open,onEscapeKeyDown:p=>{o?.(p),p.defaultPrevented||r.onOpenChange(!1)},onInteractOutside:i,onPointerDownOutside:p=>{n?.(p),p.defaultPrevented||r.onOpenChange(!1)},onFocusOutside:t},[r.contentRef,r.triggerRef]),!e&&!x)return null;let{position:w,size:a,stage:d}=r,f=d==="maximized"?{x:"0px",y:"0px",width:"100%",height:"100%"}:{x:`${w.x}px`,y:`${w.y}px`,width:`${a.width}px`,height:d==="minimized"?"auto":`${a.height}px`};return Ue(ke.div,{role:"dialog","aria-modal":!1,"aria-labelledby":r.hasTitle?r.titleId:void 0,id:r.contentId,"data-state":r.open?"open":"closed","data-stage":d,"data-dragging":r.dragging?"":void 0,"data-resizing":r.resizing?"":void 0,"data-disabled":r.disabled?"":void 0,...y,...He("floating-panel","content",y.className),ref:C,style:{"--skdx-floating-panel-x":f.x,"--skdx-floating-panel-y":f.y,"--skdx-floating-panel-width":f.width,"--skdx-floating-panel-height":f.height,...c}})};j.displayName="FloatingPanelContent";import*as ee from"react";import{directionalKey as Ke,useDirection as Be}from"../utils/direction.js";import{skdxPart as Xe}from"../utils/part.js";import{Primitive as _e,useComposedEventHandlers as N}from"../utils/primitive.js";import{jsx as $e}from"react/jsx-runtime";var Ge=10,Ye={ArrowLeft:{dx:-1,dy:0},ArrowRight:{dx:1,dy:0},ArrowUp:{dx:0,dy:-1},ArrowDown:{dx:0,dy:1}},te=({style:e,ref:o,...n})=>{let t=h("FloatingPanelHeader"),i=Be(),c=ee.useRef(null),l=ee.useRef(!1),y=t.draggable&&!t.disabled,r=a=>{y&&(a.currentTarget.setPointerCapture?.(a.pointerId),c.current={x:a.clientX,y:a.clientY},t.setDragging(!0))},C=a=>{let d=c.current;!y||!d||(t.moveBy(a.clientX-d.x,a.clientY-d.y),c.current={x:a.clientX,y:a.clientY})},R=a=>{c.current&&(a.currentTarget.releasePointerCapture?.(a.pointerId),c.current=null,t.setDragging(!1),t.announceRelease("move"))},x=a=>{if(!y)return;let d=t.step*(a.shiftKey?Ge:1),f=Ke(a.key,a.currentTarget,i),p=Ye[f];p&&(a.preventDefault(),l.current=!0,t.moveBy(p.dx*d,p.dy*d))},w=()=>{l.current&&(l.current=!1,t.announceRelease("move"))};return $e(_e.div,{role:"group","aria-disabled":t.disabled||void 0,"aria-keyshortcuts":t.draggable?"ArrowUp ArrowDown ArrowLeft ArrowRight":void 0,"data-dragging":t.dragging?"":void 0,"data-disabled":t.disabled?"":void 0,tabIndex:t.draggable?0:void 0,...n,...Xe("floating-panel","header",n.className),ref:o,onPointerDown:N(n.onPointerDown,r),onPointerMove:N(n.onPointerMove,C),onPointerUp:N(n.onPointerUp,R),onPointerCancel:N(n.onPointerCancel,R),onKeyDown:N(n.onKeyDown,x),onKeyUp:N(n.onKeyUp,w),style:{touchAction:"none",cursor:y?"move":void 0,...e}})};te.displayName="FloatingPanelHeader";import{Portal as Je}from"../utils/portal.js";import{jsx as Ve}from"react/jsx-runtime";var ne=({forceMount:e,children:o,...n})=>{let t=h("FloatingPanelPortal");return e||t.open||t.contentPresent?Ve(Je,{...n,children:o}):null};ne.displayName="FloatingPanelPortal";import*as oe from"react";import{directionalKey as We,useDirection as Ze}from"../utils/direction.js";import{skdxPart as qe}from"../utils/part.js";import{Primitive as Qe,useComposedEventHandlers as A}from"../utils/primitive.js";import{jsx as ot}from"react/jsx-runtime";var je=10,et={ArrowLeft:{dx:-1,dy:0},ArrowRight:{dx:1,dy:0},ArrowUp:{dx:0,dy:-1},ArrowDown:{dx:0,dy:1}};function tt(e){if(e==="e"||e==="w")return"vertical";if(e==="n"||e==="s")return"horizontal"}function nt(e,o){let n=o?e.size.width:e.size.height,t=o?e.minSize.width:e.minSize.height,i=o?e.maxSize.width:e.maxSize.height,c=Number.POSITIVE_INFINITY;e.bounds&&(c=o?e.bounds.width-e.position.x:e.bounds.height-e.position.y);let l=Math.max(t,Math.min(i,c));return{current:n,minimum:t,maximum:l}}var ae=({direction:e,style:o,ref:n,...t})=>{let i=h("FloatingPanelResizeTrigger"),c=Ze(),l=oe.useRef(null),y=oe.useRef(!1),r=i.resizable&&!i.disabled,C=e.includes("e")||e.includes("w"),{current:R,minimum:x,maximum:w}=nt(i,C),a=tt(e),d=s=>{r&&(s.currentTarget.setPointerCapture?.(s.pointerId),l.current={x:s.clientX,y:s.clientY},i.setResizing(!0))},f=s=>{let T=l.current;!r||!T||(i.resizeBy(e,s.clientX-T.x,s.clientY-T.y),l.current={x:s.clientX,y:s.clientY})},p=s=>{l.current&&(s.currentTarget.releasePointerCapture?.(s.pointerId),l.current=null,i.setResizing(!1),i.announceRelease("resize"))},H=s=>{if(!r)return;let T=i.step*(s.shiftKey?je:1),k=We(s.key,s.currentTarget,c),z=et[k];z&&(s.preventDefault(),y.current=!0,i.resizeBy(e,z.dx*T,z.dy*T))},O=()=>{y.current&&(y.current=!1,i.announceRelease("resize"))};return ot(Qe.div,{role:"separator","aria-orientation":a,"aria-valuenow":Math.round(R),"aria-valuemin":Math.round(x),"aria-valuemax":Number.isFinite(w)?Math.round(w):void 0,"aria-disabled":i.disabled||void 0,"aria-keyshortcuts":i.resizable?"ArrowUp ArrowDown ArrowLeft ArrowRight":void 0,"data-direction":e,"data-resizing":i.resizing?"":void 0,"data-disabled":i.disabled?"":void 0,tabIndex:i.resizable?0:void 0,...t,...qe("floating-panel","resize-trigger",t.className),ref:n,onPointerDown:A(t.onPointerDown,d),onPointerMove:A(t.onPointerMove,f),onPointerUp:A(t.onPointerUp,p),onPointerCancel:A(t.onPointerCancel,p),onKeyDown:A(t.onKeyDown,H),onKeyUp:A(t.onKeyUp,O),style:{touchAction:"none",cursor:r?`${e}-resize`:void 0,...o}})};ae.displayName="FloatingPanelResizeTrigger";import{skdxPart as at}from"../utils/part.js";import{composeEventHandlers as it,Primitive as rt}from"../utils/primitive.js";import{jsx as lt}from"react/jsx-runtime";var ie=({stage:e,ref:o,...n})=>{let t=h("FloatingPanelStageTrigger"),i=t.stage===e;return lt(rt.button,{type:"button","aria-pressed":i,"aria-disabled":t.disabled||void 0,"data-stage":t.stage,"data-state":i?"on":"off","data-disabled":t.disabled?"":void 0,...n,...at("floating-panel","stage-trigger",n.className),ref:o,onClick:it(n.onClick,()=>{t.disabled||t.onStageChange(i?"default":e)})})};ie.displayName="FloatingPanelStageTrigger";import*as ce from"react";import{skdxPart as st}from"../utils/part.js";import{Primitive as gt}from"../utils/primitive.js";import{jsx as dt}from"react/jsx-runtime";var re=({ref:e,...o})=>{let n=h("FloatingPanelTitle"),{setHasTitle:t}=n;return ce.useEffect(()=>(t(!0),()=>t(!1)),[t]),dt(gt.h2,{id:n.titleId,...o,...st("floating-panel","title",o.className),ref:e})};re.displayName="FloatingPanelTitle";import{jsx as D,jsxs as me}from"react/jsx-runtime";var mt=()=>D(ct,{name:"close"}),ue=({title:e,stages:o=[],dismissible:n,resizable:t,children:i,passThrough:c})=>D(ne,{children:me(j,{...c,children:[me(te,{"aria-label":"Drag to move panel",children:[e?D(re,{children:e}):null,o.map(l=>D(ie,{stage:l.stage,children:l.label},l.stage)),n?D(q,{"aria-label":"Close",children:D(mt,{})}):null]}),i,t?D(ae,{direction:"se","aria-label":"Resize panel"}):null]})});import{jsx as ge}from"react/jsx-runtime";function fe(e,{position:o,size:n}){return e==="move"?`Panel moved to ${o.x}, ${o.y}`:`Panel resized to ${n.width} by ${n.height}`}var[Pt,h]=ut("FloatingPanel"),ht={x:0,y:0},yt={width:320,height:240},Rt={width:160,height:120},Ft={width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY};function se(e){let o=e?.current;if(o){let n=o.getBoundingClientRect();return{width:n.width,height:n.height}}return{width:window.innerWidth,height:window.innerHeight}}function $(e,o,n,t){return X(e,o,Math.max(o,Math.min(n,t)))}function pe({children:e,open:o,defaultOpen:n=!1,onOpenChange:t,onOpenChangeComplete:i,position:c,defaultPosition:l=ht,onPositionChange:y,onPositionCommit:r,size:C,defaultSize:R=yt,onSizeChange:x,onSizeCommit:w,minSize:a=Rt,maxSize:d=Ft,boundary:f,stage:p,defaultStage:H="default",onStageChange:O,draggable:s=!0,resizable:T=!0,step:k=10,disabled:z=!1,getGestureAnnouncement:J}){let _=u.useRef(null),L=u.useRef(null),[V,W]=u.useState(!1),[he,ye]=u.useState(!1),[Re,Fe]=u.useState(!1),[be,xe]=u.useState(!1),[E,we]=u.useState(null),[I=!1,Te]=Y({prop:o,defaultProp:n,onChange:t}),[P=l,G]=Y({prop:c,defaultProp:l,onChange:y}),[m=R,Z]=Y({prop:C,defaultProp:R,onChange:x}),[Ce="default",ze]=Y({prop:p,defaultProp:H,onChange:O});pt(I,L,i),u.useEffect(()=>{let g=()=>we(se(f));g();let b=f?.current;if(b&&typeof ResizeObserver<"u"){let F=new ResizeObserver(g);return F.observe(b),()=>F.disconnect()}return window.addEventListener("resize",g),()=>window.removeEventListener("resize",g)},[f]),u.useEffect(()=>{if(!E)return;let g=Math.min(m.width,Math.max(a.width,E.width)),b=Math.min(m.height,Math.max(a.height,E.height));(g!==m.width||b!==m.height)&&Z({width:g,height:b});let F=X(P.x,0,Math.max(0,E.width-g)),v=X(P.y,0,Math.max(0,E.height-b));(F!==P.x||v!==P.y)&&G({x:F,y:v})},[E,m,a,P,Z,G]);let de=u.useRef(I);u.useEffect(()=>{if(de.current&&!I){let g=document.activeElement;(!g||g===document.body||L.current?.contains(g))&&_.current?.focus()}de.current=I},[I]);let ve=le((g,b)=>{if(z||!s)return;let F=se(f),v={x:X(P.x+g,0,Math.max(0,F.width-m.width)),y:X(P.y+b,0,Math.max(0,F.height-m.height))};(v.x!==P.x||v.y!==P.y)&&G(v)}),Ee=le((g,b,F)=>{if(z||!T)return;let v=se(f),{x:U,y:K}=P,{width:S,height:M}=m;if(g.includes("e")&&(S=$(m.width+b,a.width,d.width,v.width-U)),g.includes("w")){let B=U+S;S=$(m.width-b,a.width,d.width,B),U=B-S}if(g.includes("s")&&(M=$(m.height+F,a.height,d.height,v.height-K)),g.includes("n")){let B=K+M;M=$(m.height-F,a.height,d.height,B),K=B-M}(S!==m.width||M!==m.height)&&Z({width:S,height:M}),(U!==P.x||K!==P.y)&&G({x:U,y:K})}),De=le(g=>{g==="resize"&&w?.(m),r?.(P);let b={position:{x:Math.round(P.x),y:Math.round(P.y)},size:{width:Math.round(m.width),height:Math.round(m.height)}},F=(J??fe)(g,b);F&&ft(F)});return ge(Pt,{triggerRef:_,contentRef:L,contentId:u.useId(),titleId:u.useId(),hasTitle:be,setHasTitle:xe,open:I,onOpenChange:Te,position:P,size:m,minSize:a,maxSize:d,bounds:E,stage:Ce,onStageChange:ze,moveBy:ve,resizeBy:Ee,announceRelease:De,draggable:s,resizable:T,disabled:z,step:k,dragging:V,setDragging:W,resizing:he,setResizing:ye,contentPresent:Re,setContentPresent:Fe,children:e})}pe.displayName="FloatingPanelRoot";function Pe({children:e,title:o,stages:n,dismissible:t=!0,resizable:i=!0,open:c,defaultOpen:l,onOpenChange:y,onOpenChangeComplete:r,position:C,defaultPosition:R,onPositionChange:x,onPositionCommit:w,size:a,defaultSize:d,onSizeChange:f,onSizeCommit:p,minSize:H,maxSize:O,boundary:s,stage:T,defaultStage:k,onStageChange:z,draggable:J,step:_,disabled:L,getGestureAnnouncement:V,...W}){return ge(pe,{open:c,defaultOpen:l,onOpenChange:y,onOpenChangeComplete:r,position:C,defaultPosition:R,onPositionChange:x,onPositionCommit:w,size:a,defaultSize:d,onSizeChange:f,onSizeCommit:p,minSize:H,maxSize:O,boundary:s,stage:T,defaultStage:k,onStageChange:z,draggable:J,resizable:i,step:_,disabled:L,getGestureAnnouncement:V,children:ge(ue,{title:o,stages:n,dismissible:t,resizable:i,passThrough:W,children:e})})}Pe.displayName="FloatingPanel";import{useComposedRefs as bt}from"../utils/composeRefs.js";import{skdxPart as xt}from"../utils/part.js";import{composeEventHandlers as wt,Primitive as Tt}from"../utils/primitive.js";import{jsx as zt}from"react/jsx-runtime";var Ct=({ref:e,...o})=>{let n=h("FloatingPanelTrigger"),t=bt(e,n.triggerRef);return zt(Tt.button,{type:"button","aria-haspopup":"dialog","aria-expanded":n.open,"aria-controls":n.contentId,"data-state":n.open?"open":"closed",...o,...xt("floating-panel","trigger",o.className),ref:t,onClick:wt(o.onClick,()=>n.onOpenChange(!n.open))})};Ct.displayName="FloatingPanelTrigger";export{Pe as FloatingPanel,q as FloatingPanelCloseTrigger,j as FloatingPanelContent,te as FloatingPanelHeader,ne as FloatingPanelPortal,Pt as FloatingPanelProvider,ae as FloatingPanelResizeTrigger,pe as FloatingPanelRoot,ie as FloatingPanelStageTrigger,re as FloatingPanelTitle,Ct as FloatingPanelTrigger,fe as gestureAnnouncement,h as useFloatingPanelContext};

package/dist/floating-panel/FloatingPanelAnatomy.d.cts

@@ -6,10 +6,10 @@ import type { FloatingPanelProps } from './types.cjs';
  * @internal
  */
 export declare const FloatingPanelAnatomy: ({ title, stages, dismissible, resizable, children, passThrough, }: {
-    title?: string;
-    stages?: FloatingPanelProps["stages"];
+    title?: string | undefined;
+    stages?: FloatingPanelProps["stages"] | undefined;
     dismissible: boolean;
     resizable: boolean;
-    children?: React.ReactNode;
-    passThrough?: PassThroughProps;
+    children?: React.ReactNode | undefined;
+    passThrough?: PassThroughProps | undefined;
 }) => React.JSX.Element;

package/dist/floating-panel/FloatingPanelAnatomy.d.ts

@@ -6,10 +6,10 @@ import type { FloatingPanelProps } from './types.js';
  * @internal
  */
 export declare const FloatingPanelAnatomy: ({ title, stages, dismissible, resizable, children, passThrough, }: {
-    title?: string;
-    stages?: FloatingPanelProps["stages"];
+    title?: string | undefined;
+    stages?: FloatingPanelProps["stages"] | undefined;
     dismissible: boolean;
     resizable: boolean;
-    children?: React.ReactNode;
-    passThrough?: PassThroughProps;
+    children?: React.ReactNode | undefined;
+    passThrough?: PassThroughProps | undefined;
 }) => React.JSX.Element;

package/dist/floating-panel/FloatingPanelCloseTrigger.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FloatingPanelCloseTriggerProps } from './types.cjs';
 /**
  * Closes the panel, returning focus to FloatingPanelTrigger. Unaffected by `disabled`.
@@ -11,4 +11,7 @@ import type { FloatingPanelCloseTriggerProps } from './types.cjs';
  * </FloatingPanelHeader>
  * ```
  */
-export declare const FloatingPanelCloseTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelCloseTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FloatingPanelCloseTrigger: {
+    ({ ref: forwardedRef, ...props }: FloatingPanelCloseTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelCloseTrigger.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FloatingPanelCloseTriggerProps } from './types.js';
 /**
  * Closes the panel, returning focus to FloatingPanelTrigger. Unaffected by `disabled`.
@@ -11,4 +11,7 @@ import type { FloatingPanelCloseTriggerProps } from './types.js';
  * </FloatingPanelHeader>
  * ```
  */
-export declare const FloatingPanelCloseTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelCloseTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FloatingPanelCloseTrigger: {
+    ({ ref: forwardedRef, ...props }: FloatingPanelCloseTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelContent.d.cts

@@ -1,18 +1,8 @@
 import * as React from 'react';
 import type { FloatingPanelContentProps } from './types.cjs';
 /**
- * The movable surface: `role="dialog"` with **`aria-modal="false"`**, named by
- * `FloatingPanelTitle` through `aria-labelledby` (emitted only while Title mounted, so `aria-label` persists).
- * Traps nothing, locks nothing, covers nothing — page behind keeps working (reason to use panel over dialog).
- *
- * Closes on Escape or pointer-down outside itself/trigger (reported to `onEscapeKeyDown`/`onPointerDownOutside`,
- * then to `onInteractOutside` first so one `preventDefault()` vetoes dismissal either way).
- * Focus moving outside reported to `onFocusOutside` but never closes (non-modal window closing on blur is unusable).
- *
- * Publishes geometry as `--skdx-floating-panel-x` / `-y` / `-width` / `-height` for CSS positioning.
- * Exposes `data-state`, `data-stage`, `data-dragging`, `data-resizing`, `data-disabled`.
- * At `stage="maximized"`, width/height become `100%`. At `stage="minimized"`, height becomes `auto`.
- * Stays mounted past close until CSS exit animation ends; `forceMount` only matters if animating non-CSS.
+ * The movable surface: `role="dialog"` with `aria-modal="false"`, publishing
+ * geometry as `--skdx-floating-panel-x/-y/-width/-height` for CSS positioning.
  *
  * @example
  * ```tsx
@@ -25,4 +15,7 @@ import type { FloatingPanelContentProps } from './types.cjs';
  * </FloatingPanelPortal>
  * ```
  */
-export declare const FloatingPanelContent: React.ForwardRefExoticComponent<Omit<FloatingPanelContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FloatingPanelContent: {
+    ({ forceMount, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, style, ref: forwardedRef, ...props }: FloatingPanelContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelContent.d.ts

@@ -1,18 +1,8 @@
 import * as React from 'react';
 import type { FloatingPanelContentProps } from './types.js';
 /**
- * The movable surface: `role="dialog"` with **`aria-modal="false"`**, named by
- * `FloatingPanelTitle` through `aria-labelledby` (emitted only while Title mounted, so `aria-label` persists).
- * Traps nothing, locks nothing, covers nothing — page behind keeps working (reason to use panel over dialog).
- *
- * Closes on Escape or pointer-down outside itself/trigger (reported to `onEscapeKeyDown`/`onPointerDownOutside`,
- * then to `onInteractOutside` first so one `preventDefault()` vetoes dismissal either way).
- * Focus moving outside reported to `onFocusOutside` but never closes (non-modal window closing on blur is unusable).
- *
- * Publishes geometry as `--skdx-floating-panel-x` / `-y` / `-width` / `-height` for CSS positioning.
- * Exposes `data-state`, `data-stage`, `data-dragging`, `data-resizing`, `data-disabled`.
- * At `stage="maximized"`, width/height become `100%`. At `stage="minimized"`, height becomes `auto`.
- * Stays mounted past close until CSS exit animation ends; `forceMount` only matters if animating non-CSS.
+ * The movable surface: `role="dialog"` with `aria-modal="false"`, publishing
+ * geometry as `--skdx-floating-panel-x/-y/-width/-height` for CSS positioning.
  *
  * @example
  * ```tsx
@@ -25,4 +15,7 @@ import type { FloatingPanelContentProps } from './types.js';
  * </FloatingPanelPortal>
  * ```
  */
-export declare const FloatingPanelContent: React.ForwardRefExoticComponent<Omit<FloatingPanelContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FloatingPanelContent: {
+    ({ forceMount, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, style, ref: forwardedRef, ...props }: FloatingPanelContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelHeader.d.cts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { FloatingPanelHeaderProps } from './types.cjs';
 /**
- * Drag handle for the panel. Arrow keys move it by `step`, Shift+arrow by 10×.
- * Position announced politely on release. Mirrors under `dir="rtl"`.
- * Provide `aria-label` when focusable, describing keyboard behavior to screen readers.
+ * Drag handle for the panel: arrow keys move it by `step`, Shift+arrow by 10×, mirrored under `dir="rtl"`.
  *
  * @example
  * ```tsx
@@ -13,4 +11,7 @@ import type { FloatingPanelHeaderProps } from './types.cjs';
  * </FloatingPanelHeader>
  * ```
  */
-export declare const FloatingPanelHeader: React.ForwardRefExoticComponent<Omit<FloatingPanelHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FloatingPanelHeader: {
+    ({ style, ref: forwardedRef, ...props }: FloatingPanelHeaderProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelHeader.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { FloatingPanelHeaderProps } from './types.js';
 /**
- * Drag handle for the panel. Arrow keys move it by `step`, Shift+arrow by 10×.
- * Position announced politely on release. Mirrors under `dir="rtl"`.
- * Provide `aria-label` when focusable, describing keyboard behavior to screen readers.
+ * Drag handle for the panel: arrow keys move it by `step`, Shift+arrow by 10×, mirrored under `dir="rtl"`.
  *
  * @example
  * ```tsx
@@ -13,4 +11,7 @@ import type { FloatingPanelHeaderProps } from './types.js';
  * </FloatingPanelHeader>
  * ```
  */
-export declare const FloatingPanelHeader: React.ForwardRefExoticComponent<Omit<FloatingPanelHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FloatingPanelHeader: {
+    ({ style, ref: forwardedRef, ...props }: FloatingPanelHeaderProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelPortal.d.cts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { FloatingPanelPortalProps } from './types.cjs';
 /**
  * Teleports `FloatingPanelContent` to `document.body` (or a custom
@@ -15,6 +16,6 @@ import type { FloatingPanelPortalProps } from './types.cjs';
  * ```
  */
 export declare const FloatingPanelPortal: {
-    ({ forceMount, children, ...props }: FloatingPanelPortalProps): import("react").JSX.Element | null;
+    ({ forceMount, children, ...props }: FloatingPanelPortalProps): JSX.Element | null;
     displayName: string;
 };

package/dist/floating-panel/FloatingPanelPortal.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { FloatingPanelPortalProps } from './types.js';
 /**
  * Teleports `FloatingPanelContent` to `document.body` (or a custom
@@ -15,6 +16,6 @@ import type { FloatingPanelPortalProps } from './types.js';
  * ```
  */
 export declare const FloatingPanelPortal: {
-    ({ forceMount, children, ...props }: FloatingPanelPortalProps): import("react").JSX.Element | null;
+    ({ forceMount, children, ...props }: FloatingPanelPortalProps): JSX.Element | null;
     displayName: string;
 };

package/dist/floating-panel/FloatingPanelResizeTrigger.d.cts

@@ -11,4 +11,7 @@ import type { FloatingPanelResizeTriggerProps } from './types.cjs';
  * </FloatingPanelContent>
  * ```
  */
-export declare const FloatingPanelResizeTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelResizeTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FloatingPanelResizeTrigger: {
+    ({ direction, style, ref: forwardedRef, ...props }: FloatingPanelResizeTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelResizeTrigger.d.ts

@@ -11,4 +11,7 @@ import type { FloatingPanelResizeTriggerProps } from './types.js';
  * </FloatingPanelContent>
  * ```
  */
-export declare const FloatingPanelResizeTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelResizeTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FloatingPanelResizeTrigger: {
+    ({ direction, style, ref: forwardedRef, ...props }: FloatingPanelResizeTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelStageTrigger.d.cts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FloatingPanelStageTriggerProps } from './types.cjs';
 /**
- * Switches the panel to the named stage or back to `'default'`. One button
- * for minimize and restore, reporting state via `aria-pressed`. Exposes
- * `data-stage` and `data-state` (`on`/`off`). Refuses to act while disabled.
+ * Switches the panel to the named stage or back to `'default'`, reporting state via `aria-pressed`.
  *
  * @example
  * ```tsx
@@ -14,4 +12,7 @@ import type { FloatingPanelStageTriggerProps } from './types.cjs';
  * </FloatingPanelHeader>
  * ```
  */
-export declare const FloatingPanelStageTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelStageTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FloatingPanelStageTrigger: {
+    ({ stage, ref: forwardedRef, ...props }: FloatingPanelStageTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelStageTrigger.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FloatingPanelStageTriggerProps } from './types.js';
 /**
- * Switches the panel to the named stage or back to `'default'`. One button
- * for minimize and restore, reporting state via `aria-pressed`. Exposes
- * `data-stage` and `data-state` (`on`/`off`). Refuses to act while disabled.
+ * Switches the panel to the named stage or back to `'default'`, reporting state via `aria-pressed`.
  *
  * @example
  * ```tsx
@@ -14,4 +12,7 @@ import type { FloatingPanelStageTriggerProps } from './types.js';
  * </FloatingPanelHeader>
  * ```
  */
-export declare const FloatingPanelStageTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelStageTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FloatingPanelStageTrigger: {
+    ({ stage, ref: forwardedRef, ...props }: FloatingPanelStageTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelTitle.d.cts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { FloatingPanelTitleProps } from './types.cjs';
 /**
- * The panel's accessible name: an `<h2>` wired to `FloatingPanelContent`
- * through `aria-labelledby`. Not optional in practice — `role="dialog"` with
- * no name announces as a bare "dialog", and a page can hold several panels at
- * once.
+ * The panel's accessible name: an `<h2>` wired to `FloatingPanelContent` through `aria-labelledby`.
  *
  * @example
  * ```tsx
@@ -13,4 +10,7 @@ import type { FloatingPanelTitleProps } from './types.cjs';
  * </FloatingPanelHeader>
  * ```
  */
-export declare const FloatingPanelTitle: React.ForwardRefExoticComponent<Omit<FloatingPanelTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const FloatingPanelTitle: {
+    ({ ref: forwardedRef, ...props }: FloatingPanelTitleProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelTitle.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { FloatingPanelTitleProps } from './types.js';
 /**
- * The panel's accessible name: an `<h2>` wired to `FloatingPanelContent`
- * through `aria-labelledby`. Not optional in practice — `role="dialog"` with
- * no name announces as a bare "dialog", and a page can hold several panels at
- * once.
+ * The panel's accessible name: an `<h2>` wired to `FloatingPanelContent` through `aria-labelledby`.
  *
  * @example
  * ```tsx
@@ -13,4 +10,7 @@ import type { FloatingPanelTitleProps } from './types.js';
  * </FloatingPanelHeader>
  * ```
  */
-export declare const FloatingPanelTitle: React.ForwardRefExoticComponent<Omit<FloatingPanelTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const FloatingPanelTitle: {
+    ({ ref: forwardedRef, ...props }: FloatingPanelTitleProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelTrigger.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FloatingPanelTriggerProps } from './types.cjs';
 /**
  * Button that opens the panel and receives focus when it closes.
@@ -14,4 +14,7 @@ import type { FloatingPanelTriggerProps } from './types.cjs';
  * </FloatingPanel>
  * ```
  */
-export declare const FloatingPanelTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FloatingPanelTrigger: {
+    ({ ref: forwardedRef, ...props }: FloatingPanelTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/floating-panel/FloatingPanelTrigger.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { FloatingPanelTriggerProps } from './types.js';
 /**
  * Button that opens the panel and receives focus when it closes.
@@ -14,4 +14,7 @@ import type { FloatingPanelTriggerProps } from './types.js';
  * </FloatingPanel>
  * ```
  */
-export declare const FloatingPanelTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FloatingPanelTrigger: {
+    ({ ref: forwardedRef, ...props }: FloatingPanelTriggerProps): React.ReactNode;
+    displayName: string;
+};