@skdx/react 0.26.0

package/dist/floating-panel/FloatingPanel.js

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

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { FloatingPanelCloseTriggerProps } from './types.cjs';
+/**
+ * Button that closes the panel, returning focus to `FloatingPanelTrigger`.
+ * Usually lives in the header next to the stage triggers, but works anywhere
+ * inside `FloatingPanelContent`. Unaffected by `disabled`, which freezes the
+ * panel's geometry rather than sealing it shut.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanelHeader aria-label="Drag to move panel">
+ *   <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ *   <FloatingPanelCloseTrigger aria-label="Close panel">✕</FloatingPanelCloseTrigger>
+ * </FloatingPanelHeader>
+ * ```
+ */
+export declare const FloatingPanelCloseTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelCloseTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { FloatingPanelCloseTriggerProps } from './types.js';
+/**
+ * Button that closes the panel, returning focus to `FloatingPanelTrigger`.
+ * Usually lives in the header next to the stage triggers, but works anywhere
+ * inside `FloatingPanelContent`. Unaffected by `disabled`, which freezes the
+ * panel's geometry rather than sealing it shut.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanelHeader aria-label="Drag to move panel">
+ *   <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ *   <FloatingPanelCloseTrigger aria-label="Close panel">✕</FloatingPanelCloseTrigger>
+ * </FloatingPanelHeader>
+ * ```
+ */
+export declare const FloatingPanelCloseTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelCloseTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,39 @@
+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`. It traps nothing, locks
+ * nothing, and covers nothing — the page behind it keeps working, which is the
+ * whole reason to reach for a panel instead of a dialog.
+ *
+ * Closes on Escape or on pointer-down outside itself and its trigger, each
+ * reported to `onEscapeKeyDown`/`onPointerDownOutside` and, for the outside
+ * paths, to `onInteractOutside` first with the same event — so one
+ * `event.preventDefault()` vetoes the dismissal either way. Focus moving
+ * outside is reported to `onFocusOutside` but never closes the panel: a
+ * non-modal window that vanished when you tabbed back to the page would be
+ * unusable.
+ *
+ * Publishes its geometry as `--skdx-floating-panel-x` / `-y` / `-width` /
+ * `-height` so a consumer can position it entirely from CSS, and exposes
+ * `data-state`, `data-stage`, `data-dragging`, `data-resizing`, and
+ * `data-disabled`. At `stage="maximized"` the published width and height
+ * become `100%` rather than a measured pixel value — nothing has to observe
+ * the boundary for the panel to fill it. At `stage="minimized"` the height
+ * becomes `auto`, collapsing the panel to whatever its header needs.
+ *
+ * Stays mounted past close until its CSS exit animation ends; `forceMount`
+ * only matters if you animate with something other than CSS.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanelPortal>
+ *   <FloatingPanelContent style={{ position: 'fixed', insetInlineStart: 'var(--skdx-floating-panel-x)' }}>
+ *     <FloatingPanelHeader aria-label="Drag to move panel">
+ *       <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ *     </FloatingPanelHeader>
+ *   </FloatingPanelContent>
+ * </FloatingPanelPortal>
+ * ```
+ */
+export declare const FloatingPanelContent: React.ForwardRefExoticComponent<Omit<FloatingPanelContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,39 @@
+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`. It traps nothing, locks
+ * nothing, and covers nothing — the page behind it keeps working, which is the
+ * whole reason to reach for a panel instead of a dialog.
+ *
+ * Closes on Escape or on pointer-down outside itself and its trigger, each
+ * reported to `onEscapeKeyDown`/`onPointerDownOutside` and, for the outside
+ * paths, to `onInteractOutside` first with the same event — so one
+ * `event.preventDefault()` vetoes the dismissal either way. Focus moving
+ * outside is reported to `onFocusOutside` but never closes the panel: a
+ * non-modal window that vanished when you tabbed back to the page would be
+ * unusable.
+ *
+ * Publishes its geometry as `--skdx-floating-panel-x` / `-y` / `-width` /
+ * `-height` so a consumer can position it entirely from CSS, and exposes
+ * `data-state`, `data-stage`, `data-dragging`, `data-resizing`, and
+ * `data-disabled`. At `stage="maximized"` the published width and height
+ * become `100%` rather than a measured pixel value — nothing has to observe
+ * the boundary for the panel to fill it. At `stage="minimized"` the height
+ * becomes `auto`, collapsing the panel to whatever its header needs.
+ *
+ * Stays mounted past close until its CSS exit animation ends; `forceMount`
+ * only matters if you animate with something other than CSS.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanelPortal>
+ *   <FloatingPanelContent style={{ position: 'fixed', insetInlineStart: 'var(--skdx-floating-panel-x)' }}>
+ *     <FloatingPanelHeader aria-label="Drag to move panel">
+ *       <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ *     </FloatingPanelHeader>
+ *   </FloatingPanelContent>
+ * </FloatingPanelPortal>
+ * ```
+ */
+export declare const FloatingPanelContent: React.ForwardRefExoticComponent<Omit<FloatingPanelContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { FloatingPanelHeaderProps } from './types.cjs';
+/**
+ * The panel's drag handle — the bar you grab to move the window, and the
+ * natural home for `FloatingPanelTitle` and the close/stage buttons.
+ *
+ * **Keyboard-operable, not mouse-only.** While focused, the arrow keys move
+ * the panel by the root's `step` and Shift+arrow by ten times that, clamped to
+ * the boundary exactly as a drag would be. The final position is announced
+ * politely once, on release — never per frame. Under `dir="rtl"` the
+ * horizontal arrows mirror, like every other horizontal interaction in the
+ * package.
+ *
+ * It becomes focusable (`tabIndex={0}`) whenever dragging is actually
+ * available, so give it an `aria-label` — a focusable bar with no name tells
+ * a screen-reader user nothing about what the arrow keys will do.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanelHeader aria-label="Drag to move panel">
+ *   <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ *   <FloatingPanelCloseTrigger>Close</FloatingPanelCloseTrigger>
+ * </FloatingPanelHeader>
+ * ```
+ */
+export declare const FloatingPanelHeader: React.ForwardRefExoticComponent<Omit<FloatingPanelHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { FloatingPanelHeaderProps } from './types.js';
+/**
+ * The panel's drag handle — the bar you grab to move the window, and the
+ * natural home for `FloatingPanelTitle` and the close/stage buttons.
+ *
+ * **Keyboard-operable, not mouse-only.** While focused, the arrow keys move
+ * the panel by the root's `step` and Shift+arrow by ten times that, clamped to
+ * the boundary exactly as a drag would be. The final position is announced
+ * politely once, on release — never per frame. Under `dir="rtl"` the
+ * horizontal arrows mirror, like every other horizontal interaction in the
+ * package.
+ *
+ * It becomes focusable (`tabIndex={0}`) whenever dragging is actually
+ * available, so give it an `aria-label` — a focusable bar with no name tells
+ * a screen-reader user nothing about what the arrow keys will do.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanelHeader aria-label="Drag to move panel">
+ *   <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ *   <FloatingPanelCloseTrigger>Close</FloatingPanelCloseTrigger>
+ * </FloatingPanelHeader>
+ * ```
+ */
+export declare const FloatingPanelHeader: React.ForwardRefExoticComponent<Omit<FloatingPanelHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,25 @@
+import type { FloatingPanelPortalProps } from './types.cjs';
+/**
+ * Teleports `FloatingPanelContent` to `document.body` (or a custom
+ * `container`), so a movable window is not clipped by whatever `overflow`
+ * ancestor its trigger happens to live in.
+ *
+ * Unlike the other overlays' portals, this one does not unmount the instant
+ * the panel closes: it stays while `FloatingPanelContent` is still present,
+ * which is how a CSS exit animation gets to finish inside a portal that would
+ * otherwise have been torn out from under it.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanel>
+ *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
+ *   <FloatingPanelPortal>
+ *     <FloatingPanelContent>…</FloatingPanelContent>
+ *   </FloatingPanelPortal>
+ * </FloatingPanel>
+ * ```
+ */
+export declare const FloatingPanelPortal: {
+    ({ forceMount, children, ...props }: FloatingPanelPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

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

@@ -0,0 +1,25 @@
+import type { FloatingPanelPortalProps } from './types.js';
+/**
+ * Teleports `FloatingPanelContent` to `document.body` (or a custom
+ * `container`), so a movable window is not clipped by whatever `overflow`
+ * ancestor its trigger happens to live in.
+ *
+ * Unlike the other overlays' portals, this one does not unmount the instant
+ * the panel closes: it stays while `FloatingPanelContent` is still present,
+ * which is how a CSS exit animation gets to finish inside a portal that would
+ * otherwise have been torn out from under it.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanel>
+ *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
+ *   <FloatingPanelPortal>
+ *     <FloatingPanelContent>…</FloatingPanelContent>
+ *   </FloatingPanelPortal>
+ * </FloatingPanel>
+ * ```
+ */
+export declare const FloatingPanelPortal: {
+    ({ forceMount, children, ...props }: FloatingPanelPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { FloatingPanelResizeTriggerProps } from './types.cjs';
+/**
+ * One resize grip, for the edge or corner named by `direction`. Render as many
+ * as you want handles — eight for a full window, one `"se"` corner for the
+ * common case.
+ *
+ * Renders `role="separator"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
+ * describing the dimension this grip controls (width for `e`/`w` and the
+ * corners, height for `n`/`s`), plus `aria-orientation` on the four edges,
+ * `data-direction`, `data-resizing`, and `data-disabled`.
+ *
+ * **Keyboard-operable.** While focused, the arrow keys resize along this
+ * grip's own direction — a `"e"` grip ignores the vertical arrows, a `"se"`
+ * grip answers to all four — by the root's `step`, or ten times that with
+ * Shift. Dragging a `w` or `n` grip moves the panel's origin as well as its
+ * size, so the opposite edge stays put. Every result is clamped to `minSize`,
+ * `maxSize`, and the boundary. The final size is announced politely once, on
+ * release. Under `dir="rtl"` the horizontal arrows mirror.
+ *
+ * Give it an `aria-label` — a grip announced only as "separator" is not
+ * operable by anyone who cannot see where it sits.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanelContent>
+ *   …
+ *   <FloatingPanelResizeTrigger direction="se" aria-label="Resize panel" />
+ * </FloatingPanelContent>
+ * ```
+ */
+export declare const FloatingPanelResizeTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelResizeTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { FloatingPanelResizeTriggerProps } from './types.js';
+/**
+ * One resize grip, for the edge or corner named by `direction`. Render as many
+ * as you want handles — eight for a full window, one `"se"` corner for the
+ * common case.
+ *
+ * Renders `role="separator"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
+ * describing the dimension this grip controls (width for `e`/`w` and the
+ * corners, height for `n`/`s`), plus `aria-orientation` on the four edges,
+ * `data-direction`, `data-resizing`, and `data-disabled`.
+ *
+ * **Keyboard-operable.** While focused, the arrow keys resize along this
+ * grip's own direction — a `"e"` grip ignores the vertical arrows, a `"se"`
+ * grip answers to all four — by the root's `step`, or ten times that with
+ * Shift. Dragging a `w` or `n` grip moves the panel's origin as well as its
+ * size, so the opposite edge stays put. Every result is clamped to `minSize`,
+ * `maxSize`, and the boundary. The final size is announced politely once, on
+ * release. Under `dir="rtl"` the horizontal arrows mirror.
+ *
+ * Give it an `aria-label` — a grip announced only as "separator" is not
+ * operable by anyone who cannot see where it sits.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanelContent>
+ *   …
+ *   <FloatingPanelResizeTrigger direction="se" aria-label="Resize panel" />
+ * </FloatingPanelContent>
+ * ```
+ */
+export declare const FloatingPanelResizeTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelResizeTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { FloatingPanelStageTriggerProps } from './types.cjs';
+/**
+ * Button that switches the panel to the `stage` it names — and back to
+ * `'default'` when the panel is already there. That toggle is why minimize and
+ * restore are one button rather than two: it reports the state it is in via
+ * `aria-pressed`, so a screen reader announces "Minimize, pressed" rather than
+ * two buttons swapping places under the user.
+ *
+ * Also exposes the panel's current stage as `data-stage` and its own active
+ * state as `data-state` (`on`/`off`). Refuses to act while the panel is
+ * `disabled`, since a stage change rewrites the panel's geometry.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanelHeader aria-label="Drag to move panel">
+ *   <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ *   <FloatingPanelStageTrigger stage="minimized">Minimize</FloatingPanelStageTrigger>
+ *   <FloatingPanelStageTrigger stage="maximized">Maximize</FloatingPanelStageTrigger>
+ * </FloatingPanelHeader>
+ * ```
+ */
+export declare const FloatingPanelStageTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelStageTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { FloatingPanelStageTriggerProps } from './types.js';
+/**
+ * Button that switches the panel to the `stage` it names — and back to
+ * `'default'` when the panel is already there. That toggle is why minimize and
+ * restore are one button rather than two: it reports the state it is in via
+ * `aria-pressed`, so a screen reader announces "Minimize, pressed" rather than
+ * two buttons swapping places under the user.
+ *
+ * Also exposes the panel's current stage as `data-stage` and its own active
+ * state as `data-state` (`on`/`off`). Refuses to act while the panel is
+ * `disabled`, since a stage change rewrites the panel's geometry.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanelHeader aria-label="Drag to move panel">
+ *   <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ *   <FloatingPanelStageTrigger stage="minimized">Minimize</FloatingPanelStageTrigger>
+ *   <FloatingPanelStageTrigger stage="maximized">Maximize</FloatingPanelStageTrigger>
+ * </FloatingPanelHeader>
+ * ```
+ */
+export declare const FloatingPanelStageTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelStageTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,16 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanelHeader aria-label="Drag to move panel">
+ *   <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ * </FloatingPanelHeader>
+ * ```
+ */
+export declare const FloatingPanelTitle: React.ForwardRefExoticComponent<Omit<FloatingPanelTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

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

@@ -0,0 +1,16 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanelHeader aria-label="Drag to move panel">
+ *   <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ * </FloatingPanelHeader>
+ * ```
+ */
+export declare const FloatingPanelTitle: React.ForwardRefExoticComponent<Omit<FloatingPanelTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { FloatingPanelTriggerProps } from './types.cjs';
+/**
+ * Button that opens the panel, and the element focus returns to when the panel
+ * closes. Sets `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`, and
+ * `data-state` (`open`/`closed`). Clicking it while the panel is open closes
+ * it again.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanel>
+ *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
+ *   <FloatingPanelPortal>
+ *     <FloatingPanelContent>…</FloatingPanelContent>
+ *   </FloatingPanelPortal>
+ * </FloatingPanel>
+ * ```
+ */
+export declare const FloatingPanelTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { FloatingPanelTriggerProps } from './types.js';
+/**
+ * Button that opens the panel, and the element focus returns to when the panel
+ * closes. Sets `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`, and
+ * `data-state` (`open`/`closed`). Clicking it while the panel is open closes
+ * it again.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanel>
+ *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
+ *   <FloatingPanelPortal>
+ *     <FloatingPanelContent>…</FloatingPanelContent>
+ *   </FloatingPanelPortal>
+ * </FloatingPanel>
+ * ```
+ */
+export declare const FloatingPanelTrigger: React.ForwardRefExoticComponent<Omit<FloatingPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,10 @@
+export * from './FloatingPanel.cjs';
+export { FloatingPanelTrigger } from './FloatingPanelTrigger.cjs';
+export { FloatingPanelPortal } from './FloatingPanelPortal.cjs';
+export { FloatingPanelContent } from './FloatingPanelContent.cjs';
+export { FloatingPanelHeader } from './FloatingPanelHeader.cjs';
+export { FloatingPanelTitle } from './FloatingPanelTitle.cjs';
+export { FloatingPanelCloseTrigger } from './FloatingPanelCloseTrigger.cjs';
+export { FloatingPanelResizeTrigger } from './FloatingPanelResizeTrigger.cjs';
+export { FloatingPanelStageTrigger } from './FloatingPanelStageTrigger.cjs';
+export type { FloatingPanelPosition, FloatingPanelSize, FloatingPanelGeometry, FloatingPanelStage, FloatingPanelResizeDirection, FloatingPanelProps, FloatingPanelTriggerProps, FloatingPanelPortalProps, FloatingPanelContentProps, FloatingPanelHeaderProps, FloatingPanelTitleProps, FloatingPanelCloseTriggerProps, FloatingPanelResizeTriggerProps, FloatingPanelStageTriggerProps, } from './types.cjs';

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

@@ -0,0 +1,10 @@
+export * from './FloatingPanel.js';
+export { FloatingPanelTrigger } from './FloatingPanelTrigger.js';
+export { FloatingPanelPortal } from './FloatingPanelPortal.js';
+export { FloatingPanelContent } from './FloatingPanelContent.js';
+export { FloatingPanelHeader } from './FloatingPanelHeader.js';
+export { FloatingPanelTitle } from './FloatingPanelTitle.js';
+export { FloatingPanelCloseTrigger } from './FloatingPanelCloseTrigger.js';
+export { FloatingPanelResizeTrigger } from './FloatingPanelResizeTrigger.js';
+export { FloatingPanelStageTrigger } from './FloatingPanelStageTrigger.js';
+export type { FloatingPanelPosition, FloatingPanelSize, FloatingPanelGeometry, FloatingPanelStage, FloatingPanelResizeDirection, FloatingPanelProps, FloatingPanelTriggerProps, FloatingPanelPortalProps, FloatingPanelContentProps, FloatingPanelHeaderProps, FloatingPanelTitleProps, FloatingPanelCloseTriggerProps, FloatingPanelResizeTriggerProps, FloatingPanelStageTriggerProps, } from './types.js';