@skdx/react 0.26.0

package/dist/file-upload/FileUpload.js

@@ -0,0 +1 @@
+import*as a from"react";import{createSafeContext as W}from"../utils/createContext.js";import{skdxPart as B}from"../utils/part.js";import{Primitive as A}from"../utils/primitive.js";import{useControllableState as K}from"../utils/useControllableState.js";import{jsx as v}from"react/jsx-runtime";var[_,n]=W("FileUpload");function q(o,t){if(!t)return!0;let e=t.split(",").map(i=>i.trim().toLowerCase()).filter(Boolean);if(e.length===0)return!0;let l=o.name.toLowerCase(),r=o.type.toLowerCase();return e.some(i=>i.startsWith(".")?l.endsWith(i):i.endsWith("/*")?r.startsWith(i.slice(0,-1)):r===i)}function G(o,t){let e=[];return q(o,t.accept)||e.push("file-invalid-type"),t.maxFileSize!==void 0&&o.size>t.maxFileSize&&e.push("file-too-large"),t.minFileSize!==void 0&&o.size<t.minFileSize&&e.push("file-too-small"),e.push(...t.validate?.(o)??[]),e}var C=a.forwardRef(({value:o,defaultValue:t=[],onValueChange:e,accept:l,multiple:r=!1,disabled:i=!1,maxFiles:g,maxFileSize:y,minFileSize:P,validate:h,onFileReject:b,...x},M)=>{let R=a.useRef(null),[c=[],s]=K({prop:o,defaultProp:t,onChange:e}),S=a.useCallback(u=>{if(i)return;let m=r?c:[],D=(r?g??1/0:1)-m.length,p=[];for(let F of Array.from(u)){let U=G(F,{accept:l,maxFileSize:y,minFileSize:P,validate:h});if(p.length>=D&&U.push("too-many-files"),U.length>0){b?.({file:F,errors:U});continue}p.push(F)}p.length!==0&&s([...m,...p])},[i,r,c,g,s,l,y,P,h,b]),O=a.useCallback(u=>{s((m=[])=>m.filter((D,p)=>p!==u))},[s]),V=a.useCallback(()=>{i||R.current?.click()},[i]);return v(_,{inputRef:R,files:c,disabled:i,accept:l,multiple:r,addFiles:S,removeFile:O,openPicker:V,children:v(A.div,{"data-disabled":i?"":void 0,...x,...B("file-upload","root",x.className),ref:M})})});C.displayName="FileUpload";import*as f from"react";import{skdxPart as J}from"../utils/part.js";import{composeEventHandlers as d,Primitive as Q}from"../utils/primitive.js";import{jsx as X}from"react/jsx-runtime";var I=f.forwardRef((o,t)=>{let e=n("FileUploadDropzone"),[l,r]=f.useState(!1);return X(Q.div,{role:"button",tabIndex:e.disabled?-1:0,"aria-disabled":e.disabled||void 0,"data-disabled":e.disabled?"":void 0,"data-dragging":l?"":void 0,...o,...J("file-upload","dropzone",o.className),ref:t,onClick:d(o.onClick,()=>e.openPicker()),onKeyDown:d(o.onKeyDown,i=>{(i.key==="Enter"||i.key===" ")&&!e.disabled&&(i.preventDefault(),e.openPicker())}),onDragOver:d(o.onDragOver,i=>{i.preventDefault(),e.disabled||r(!0)}),onDragLeave:d(o.onDragLeave,()=>r(!1)),onDrop:d(o.onDrop,i=>{i.preventDefault(),r(!1),e.disabled||e.addFiles(i.dataTransfer.files)})})});I.displayName="FileUploadDropzone";import*as k from"react";import{useComposedRefs as Y}from"../utils/composeRefs.js";import{HiddenInput as Z}from"../utils/hiddenInput.js";import{skdxPart as $}from"../utils/part.js";import{composeEventHandlers as j}from"../utils/primitive.js";import{jsx as ee}from"react/jsx-runtime";var w=k.forwardRef((o,t)=>{let e=n("FileUploadInput"),l=Y(t,e.inputRef);return ee(Z,{type:"file",accept:e.accept,multiple:e.multiple,disabled:e.disabled,...o,...$("file-upload","input",o.className),ref:l,onChange:j(o.onChange,r=>{r.target.files&&e.addFiles(r.target.files),r.target.value=""})})});w.displayName="FileUploadInput";import*as T from"react";import{skdxPart as oe}from"../utils/part.js";import{Primitive as te}from"../utils/primitive.js";import{jsx as ie}from"react/jsx-runtime";var E=T.forwardRef(({index:o,status:t="idle",progress:e,...l},r)=>ie(te.div,{"data-status":t,"data-progress":e,...l,...oe("file-upload","item",l.className),ref:r}));E.displayName="FileUploadItem";import*as L from"react";import{skdxPart as le}from"../utils/part.js";import{composeEventHandlers as re,Primitive as ae}from"../utils/primitive.js";import{jsx as ne}from"react/jsx-runtime";var z=L.forwardRef(({index:o,...t},e)=>{let l=n("FileUploadItemDelete");return ne(ae.button,{type:"button","aria-label":"Remove file",disabled:l.disabled,"data-disabled":l.disabled?"":void 0,...t,...le("file-upload","item-delete",t.className),ref:e,onClick:re(t.onClick,()=>{l.disabled||l.removeFile(o)})})});z.displayName="FileUploadItemDelete";import*as H from"react";import{skdxPart as pe}from"../utils/part.js";import{composeEventHandlers as de,Primitive as se}from"../utils/primitive.js";import{jsx as me}from"react/jsx-runtime";var N=H.forwardRef((o,t)=>{let e=n("FileUploadTrigger");return me(se.button,{type:"button",disabled:e.disabled,"data-disabled":e.disabled?"":void 0,...o,...pe("file-upload","trigger",o.className),ref:t,onClick:de(o.onClick,()=>e.openPicker())})});N.displayName="FileUploadTrigger";export{C as FileUpload,I as FileUploadDropzone,w as FileUploadInput,E as FileUploadItem,z as FileUploadItemDelete,N as FileUploadTrigger};

package/dist/file-upload/FileUploadDropzone.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { FileUploadDropzoneProps } from './types.cjs';
+/**
+ * Drag-and-drop / click-to-browse target: `role="button"`, keyboard
+ * activatable (Enter/Space), with `aria-disabled`/`data-disabled` and
+ * `data-dragging` (set while a drag is over it) reflecting state. Clicking
+ * or activating it, or dropping files onto it, opens the native picker or
+ * adds the dropped files respectively.
+ *
+ * @example
+ * ```tsx
+ * <FileUploadDropzone>
+ *   Drag files here or <FileUploadTrigger>browse</FileUploadTrigger>
+ *   <FileUploadInput />
+ * </FileUploadDropzone>
+ * ```
+ */
+export declare const FileUploadDropzone: React.ForwardRefExoticComponent<Omit<FileUploadDropzoneProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/file-upload/FileUploadDropzone.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { FileUploadDropzoneProps } from './types.js';
+/**
+ * Drag-and-drop / click-to-browse target: `role="button"`, keyboard
+ * activatable (Enter/Space), with `aria-disabled`/`data-disabled` and
+ * `data-dragging` (set while a drag is over it) reflecting state. Clicking
+ * or activating it, or dropping files onto it, opens the native picker or
+ * adds the dropped files respectively.
+ *
+ * @example
+ * ```tsx
+ * <FileUploadDropzone>
+ *   Drag files here or <FileUploadTrigger>browse</FileUploadTrigger>
+ *   <FileUploadInput />
+ * </FileUploadDropzone>
+ * ```
+ */
+export declare const FileUploadDropzone: React.ForwardRefExoticComponent<Omit<FileUploadDropzoneProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/file-upload/FileUploadInput.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { FileUploadInputProps } from './types.cjs';
+/**
+ * The visually-hidden native `<input type="file">` that actually opens the
+ * OS file dialog and receives its selection. Its `accept`, `multiple`, and
+ * `disabled` come from the enclosing `FileUpload`. Render it once anywhere
+ * inside `FileUpload` — `FileUploadDropzone`/`FileUploadTrigger` open it
+ * programmatically, you never need to interact with it directly.
+ *
+ * @example
+ * ```tsx
+ * <FileUploadDropzone>
+ *   Drag files here
+ *   <FileUploadInput />
+ * </FileUploadDropzone>
+ * ```
+ */
+export declare const FileUploadInput: React.ForwardRefExoticComponent<FileUploadInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/file-upload/FileUploadInput.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { FileUploadInputProps } from './types.js';
+/**
+ * The visually-hidden native `<input type="file">` that actually opens the
+ * OS file dialog and receives its selection. Its `accept`, `multiple`, and
+ * `disabled` come from the enclosing `FileUpload`. Render it once anywhere
+ * inside `FileUpload` — `FileUploadDropzone`/`FileUploadTrigger` open it
+ * programmatically, you never need to interact with it directly.
+ *
+ * @example
+ * ```tsx
+ * <FileUploadDropzone>
+ *   Drag files here
+ *   <FileUploadInput />
+ * </FileUploadDropzone>
+ * ```
+ */
+export declare const FileUploadInput: React.ForwardRefExoticComponent<FileUploadInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/file-upload/FileUploadItem.d.cts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { FileUploadItemProps } from './types.cjs';
+/**
+ * Row for a single selected file, identified by its `index` in the
+ * `FileUpload`'s current file list. Renders a plain `<div>` — render the
+ * file's name/size/preview and a `FileUploadItemDelete` as children.
+ *
+ * `status`/`progress` are pushed in by the consumer: FileUpload is transport-
+ * free, so it never learns that a file finished uploading. They surface as
+ * `data-status` / `data-progress` so per-file progress and error UIs are
+ * styleable without forking the component.
+ *
+ * @example
+ * ```tsx
+ * {files.map((file, index) => (
+ *   <FileUploadItem key={file.name} index={index} status={upload[file.name]?.status} progress={upload[file.name]?.progress}>
+ *     {file.name}
+ *     <FileUploadItemDelete index={index} />
+ *   </FileUploadItem>
+ * ))}
+ * ```
+ */
+export declare const FileUploadItem: React.ForwardRefExoticComponent<Omit<FileUploadItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/file-upload/FileUploadItem.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { FileUploadItemProps } from './types.js';
+/**
+ * Row for a single selected file, identified by its `index` in the
+ * `FileUpload`'s current file list. Renders a plain `<div>` — render the
+ * file's name/size/preview and a `FileUploadItemDelete` as children.
+ *
+ * `status`/`progress` are pushed in by the consumer: FileUpload is transport-
+ * free, so it never learns that a file finished uploading. They surface as
+ * `data-status` / `data-progress` so per-file progress and error UIs are
+ * styleable without forking the component.
+ *
+ * @example
+ * ```tsx
+ * {files.map((file, index) => (
+ *   <FileUploadItem key={file.name} index={index} status={upload[file.name]?.status} progress={upload[file.name]?.progress}>
+ *     {file.name}
+ *     <FileUploadItemDelete index={index} />
+ *   </FileUploadItem>
+ * ))}
+ * ```
+ */
+export declare const FileUploadItem: React.ForwardRefExoticComponent<Omit<FileUploadItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/file-upload/FileUploadItemDelete.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { FileUploadItemDeleteProps } from './types.cjs';
+/**
+ * Button that removes its `index`-th file from the `FileUpload`'s file
+ * list when clicked. Defaults `aria-label` to `"Remove file"` (override via
+ * props) and mirrors the upload's `disabled` state.
+ *
+ * @example
+ * ```tsx
+ * <FileUploadItem index={index}>
+ *   {file.name}
+ *   <FileUploadItemDelete index={index} />
+ * </FileUploadItem>
+ * ```
+ */
+export declare const FileUploadItemDelete: React.ForwardRefExoticComponent<Omit<FileUploadItemDeleteProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/file-upload/FileUploadItemDelete.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { FileUploadItemDeleteProps } from './types.js';
+/**
+ * Button that removes its `index`-th file from the `FileUpload`'s file
+ * list when clicked. Defaults `aria-label` to `"Remove file"` (override via
+ * props) and mirrors the upload's `disabled` state.
+ *
+ * @example
+ * ```tsx
+ * <FileUploadItem index={index}>
+ *   {file.name}
+ *   <FileUploadItemDelete index={index} />
+ * </FileUploadItem>
+ * ```
+ */
+export declare const FileUploadItemDelete: React.ForwardRefExoticComponent<Omit<FileUploadItemDeleteProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/file-upload/FileUploadTrigger.d.cts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { FileUploadTriggerProps } from './types.cjs';
+/**
+ * Button that opens the native file picker when clicked. Mirrors the
+ * enclosing `FileUpload`'s `disabled` state (native `disabled` plus
+ * `data-disabled`).
+ *
+ * @example
+ * ```tsx
+ * <FileUploadTrigger>Choose files</FileUploadTrigger>
+ * ```
+ */
+export declare const FileUploadTrigger: React.ForwardRefExoticComponent<Omit<FileUploadTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/file-upload/FileUploadTrigger.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { FileUploadTriggerProps } from './types.js';
+/**
+ * Button that opens the native file picker when clicked. Mirrors the
+ * enclosing `FileUpload`'s `disabled` state (native `disabled` plus
+ * `data-disabled`).
+ *
+ * @example
+ * ```tsx
+ * <FileUploadTrigger>Choose files</FileUploadTrigger>
+ * ```
+ */
+export declare const FileUploadTrigger: React.ForwardRefExoticComponent<Omit<FileUploadTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/file-upload/index.d.cts

@@ -0,0 +1,7 @@
+export { FileUpload } from './FileUpload.cjs';
+export { FileUploadDropzone } from './FileUploadDropzone.cjs';
+export { type FileUploadDropzoneProps, type FileUploadFileStatus, type FileUploadInputProps, type FileUploadItemDeleteProps, type FileUploadItemProps, type FileUploadProps, type FileUploadRejection, type FileUploadTriggerProps, } from './types.cjs';
+export { FileUploadInput } from './FileUploadInput.cjs';
+export { FileUploadItem } from './FileUploadItem.cjs';
+export { FileUploadItemDelete } from './FileUploadItemDelete.cjs';
+export { FileUploadTrigger } from './FileUploadTrigger.cjs';

package/dist/file-upload/index.d.ts

@@ -0,0 +1,7 @@
+export { FileUpload } from './FileUpload.js';
+export { FileUploadDropzone } from './FileUploadDropzone.js';
+export { type FileUploadDropzoneProps, type FileUploadFileStatus, type FileUploadInputProps, type FileUploadItemDeleteProps, type FileUploadItemProps, type FileUploadProps, type FileUploadRejection, type FileUploadTriggerProps, } from './types.js';
+export { FileUploadInput } from './FileUploadInput.js';
+export { FileUploadItem } from './FileUploadItem.js';
+export { FileUploadItemDelete } from './FileUploadItemDelete.js';
+export { FileUploadTrigger } from './FileUploadTrigger.js';

package/dist/file-upload/types.d.cts

@@ -0,0 +1,145 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/**
+ * Per-file upload status. The component performs no transport of its own, so
+ * this is pushed onto {@link FileUploadItem} by whoever owns the upload.
+ */
+export type FileUploadFileStatus = 'idle' | 'uploading' | 'complete' | 'error';
+/**
+ * Why one file was refused. Built-in codes are `file-invalid-type` (fails
+ * `accept`), `file-too-large` / `file-too-small` (fails `maxFileSize` /
+ * `minFileSize`), and `too-many-files` (would exceed `maxFiles`); a
+ * {@link FileUploadProps.validate} callback contributes its own codes
+ * alongside them.
+ */
+export interface FileUploadRejection {
+    /** The file that was refused. It is never added to the file list. */
+    file: File;
+    /** Every reason it was refused, built-in codes first. Never empty. */
+    errors: string[];
+}
+/** @internal The checks {@link FileUploadProps.validate} and the size/type props feed. */
+export interface FileUploadValidateOptions {
+    accept?: string;
+    maxFileSize?: number;
+    minFileSize?: number;
+    validate?: (file: File) => string[] | null | undefined;
+}
+/** Shape returned by the exported `useFileUploadContext` hook; distributed from {@link FileUpload} to its parts via context. */
+export interface FileUploadContextValue {
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    files: File[];
+    disabled: boolean;
+    accept?: string;
+    multiple: boolean;
+    addFiles: (files: FileList | File[]) => void;
+    removeFile: (index: number) => void;
+    openPicker: () => void;
+}
+/** Props for the {@link FileUpload} root. */
+export interface FileUploadProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
+    /**
+     * The selected files, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own file list internally.
+     */
+    value?: File[];
+    /**
+     * Initially selected files, for uncontrolled usage.
+     * @default []
+     */
+    defaultValue?: File[];
+    /**
+     * Fires with the new file list whenever files are added or removed, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (files: File[]) => void;
+    /**
+     * Comma-separated file-type filter (extensions like `.png` or MIME
+     * patterns like `image/*`), applied to both the native picker dialog and
+     * drag-and-drop — the browser only filters the former on its own.
+     * @default undefined — every file type is accepted.
+     */
+    accept?: string;
+    /**
+     * Allow selecting/dropping more than one file. When `false`, a new
+     * selection replaces the existing file instead of appending.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Disables the dropzone, trigger, and file input, and blocks adding or
+     * removing files.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Most files the list may hold; files past the cap are rejected with
+     * `too-many-files` rather than added. Ignored while `multiple` is `false`,
+     * which caps the list at one file anyway.
+     * @default undefined — unlimited.
+     */
+    maxFiles?: number;
+    /**
+     * Largest accepted file size in bytes; a bigger file is rejected with
+     * `file-too-large`.
+     * @default undefined — no upper bound.
+     */
+    maxFileSize?: number;
+    /**
+     * Smallest accepted file size in bytes; a smaller file is rejected with
+     * `file-too-small`.
+     * @default undefined — no lower bound.
+     */
+    minFileSize?: number;
+    /**
+     * Extra per-file check, run after the built-in ones. Return error codes to
+     * reject the file, or `null`/`undefined`/`[]` to accept it.
+     * @default undefined — only the built-in checks apply.
+     */
+    validate?: (file: File) => string[] | null | undefined;
+    /**
+     * Fires once per refused file, before the accepted files are committed.
+     * Rejections are transient — nothing is stored, so render them yourself (or
+     * let a wrapping `Field` own the persistent field-level message).
+     * @default undefined — refused files are dropped silently.
+     */
+    onFileReject?: (rejection: FileUploadRejection) => void;
+}
+/** Props for {@link FileUploadDropzone}, the drag-and-drop / click-to-browse target. */
+export interface FileUploadDropzoneProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link FileUploadTrigger}, a button that opens the native file picker. */
+export interface FileUploadTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/**
+ * Props for {@link FileUploadInput}, the visually-hidden native `<input type="file">`.
+ *
+ * `onChange` is *not* omitted, unlike the component-owned `type`/`value`: the
+ * input composes the consumer's handler with its own (consumer first), so both
+ * run on a selection. Prefer the root's `onValueChange` for the committed file
+ * list — this one sees the raw `change` event, before validation and rejection.
+ */
+export interface FileUploadInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue'> {
+}
+/** Props for {@link FileUploadItem}, a single selected file's row. */
+export interface FileUploadItemProps extends PrimitivePropsWithRef<'div'> {
+    /** Index of this file in the `FileUpload`'s current file list. */
+    index: number;
+    /**
+     * This file's upload status, owned by whoever runs the transport — the
+     * component never sets it itself. Reflected as `data-status`.
+     * @default 'idle'
+     */
+    status?: FileUploadFileStatus;
+    /**
+     * This file's upload progress, 0-100, owned by whoever runs the transport.
+     * Reflected as `data-progress`.
+     * @default undefined — no progress reported, `data-progress` is omitted.
+     */
+    progress?: number;
+}
+/** Props for {@link FileUploadItemDelete}, a button that removes one selected file. */
+export interface FileUploadItemDeleteProps extends PrimitivePropsWithRef<'button'> {
+    /** Index of the file to remove from the `FileUpload`'s current file list. */
+    index: number;
+}

package/dist/file-upload/types.d.ts

@@ -0,0 +1,145 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/**
+ * Per-file upload status. The component performs no transport of its own, so
+ * this is pushed onto {@link FileUploadItem} by whoever owns the upload.
+ */
+export type FileUploadFileStatus = 'idle' | 'uploading' | 'complete' | 'error';
+/**
+ * Why one file was refused. Built-in codes are `file-invalid-type` (fails
+ * `accept`), `file-too-large` / `file-too-small` (fails `maxFileSize` /
+ * `minFileSize`), and `too-many-files` (would exceed `maxFiles`); a
+ * {@link FileUploadProps.validate} callback contributes its own codes
+ * alongside them.
+ */
+export interface FileUploadRejection {
+    /** The file that was refused. It is never added to the file list. */
+    file: File;
+    /** Every reason it was refused, built-in codes first. Never empty. */
+    errors: string[];
+}
+/** @internal The checks {@link FileUploadProps.validate} and the size/type props feed. */
+export interface FileUploadValidateOptions {
+    accept?: string;
+    maxFileSize?: number;
+    minFileSize?: number;
+    validate?: (file: File) => string[] | null | undefined;
+}
+/** Shape returned by the exported `useFileUploadContext` hook; distributed from {@link FileUpload} to its parts via context. */
+export interface FileUploadContextValue {
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    files: File[];
+    disabled: boolean;
+    accept?: string;
+    multiple: boolean;
+    addFiles: (files: FileList | File[]) => void;
+    removeFile: (index: number) => void;
+    openPicker: () => void;
+}
+/** Props for the {@link FileUpload} root. */
+export interface FileUploadProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
+    /**
+     * The selected files, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own file list internally.
+     */
+    value?: File[];
+    /**
+     * Initially selected files, for uncontrolled usage.
+     * @default []
+     */
+    defaultValue?: File[];
+    /**
+     * Fires with the new file list whenever files are added or removed, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (files: File[]) => void;
+    /**
+     * Comma-separated file-type filter (extensions like `.png` or MIME
+     * patterns like `image/*`), applied to both the native picker dialog and
+     * drag-and-drop — the browser only filters the former on its own.
+     * @default undefined — every file type is accepted.
+     */
+    accept?: string;
+    /**
+     * Allow selecting/dropping more than one file. When `false`, a new
+     * selection replaces the existing file instead of appending.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Disables the dropzone, trigger, and file input, and blocks adding or
+     * removing files.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Most files the list may hold; files past the cap are rejected with
+     * `too-many-files` rather than added. Ignored while `multiple` is `false`,
+     * which caps the list at one file anyway.
+     * @default undefined — unlimited.
+     */
+    maxFiles?: number;
+    /**
+     * Largest accepted file size in bytes; a bigger file is rejected with
+     * `file-too-large`.
+     * @default undefined — no upper bound.
+     */
+    maxFileSize?: number;
+    /**
+     * Smallest accepted file size in bytes; a smaller file is rejected with
+     * `file-too-small`.
+     * @default undefined — no lower bound.
+     */
+    minFileSize?: number;
+    /**
+     * Extra per-file check, run after the built-in ones. Return error codes to
+     * reject the file, or `null`/`undefined`/`[]` to accept it.
+     * @default undefined — only the built-in checks apply.
+     */
+    validate?: (file: File) => string[] | null | undefined;
+    /**
+     * Fires once per refused file, before the accepted files are committed.
+     * Rejections are transient — nothing is stored, so render them yourself (or
+     * let a wrapping `Field` own the persistent field-level message).
+     * @default undefined — refused files are dropped silently.
+     */
+    onFileReject?: (rejection: FileUploadRejection) => void;
+}
+/** Props for {@link FileUploadDropzone}, the drag-and-drop / click-to-browse target. */
+export interface FileUploadDropzoneProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link FileUploadTrigger}, a button that opens the native file picker. */
+export interface FileUploadTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/**
+ * Props for {@link FileUploadInput}, the visually-hidden native `<input type="file">`.
+ *
+ * `onChange` is *not* omitted, unlike the component-owned `type`/`value`: the
+ * input composes the consumer's handler with its own (consumer first), so both
+ * run on a selection. Prefer the root's `onValueChange` for the committed file
+ * list — this one sees the raw `change` event, before validation and rejection.
+ */
+export interface FileUploadInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue'> {
+}
+/** Props for {@link FileUploadItem}, a single selected file's row. */
+export interface FileUploadItemProps extends PrimitivePropsWithRef<'div'> {
+    /** Index of this file in the `FileUpload`'s current file list. */
+    index: number;
+    /**
+     * This file's upload status, owned by whoever runs the transport — the
+     * component never sets it itself. Reflected as `data-status`.
+     * @default 'idle'
+     */
+    status?: FileUploadFileStatus;
+    /**
+     * This file's upload progress, 0-100, owned by whoever runs the transport.
+     * Reflected as `data-progress`.
+     * @default undefined — no progress reported, `data-progress` is omitted.
+     */
+    progress?: number;
+}
+/** Props for {@link FileUploadItemDelete}, a button that removes one selected file. */
+export interface FileUploadItemDeleteProps extends PrimitivePropsWithRef<'button'> {
+    /** Index of the file to remove from the `FileUpload`'s current file list. */
+    index: number;
+}

package/dist/floating-panel/FloatingPanel.cjs

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

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import type { FloatingPanelContextValue, FloatingPanelGeometry, FloatingPanelGesture, FloatingPanelProps } from './types.cjs';
+/**
+ * The default wording of the release announcement, exported so
+ * {@link FloatingPanelProps.getGestureAnnouncement} can defer to it for the
+ * gesture it does not want to re-word.
+ */
+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;
+/**
+ * Root of a draggable, resizable, **non-modal** floating panel — the movable
+ * window pattern. Owns open state, position, size, and stage, and hands them
+ * down to `FloatingPanelTrigger` / `FloatingPanelPortal` /
+ * `FloatingPanelContent` / `FloatingPanelHeader` / `FloatingPanelTitle` /
+ * `FloatingPanelCloseTrigger` / `FloatingPanelResizeTrigger` /
+ * `FloatingPanelStageTrigger` via context. 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.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanel defaultPosition={{ x: 40, y: 40 }}>
+ *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
+ *   <FloatingPanelPortal>
+ *     <FloatingPanelContent>
+ *       <FloatingPanelHeader aria-label="Drag to move panel">
+ *         <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ *         <FloatingPanelStageTrigger stage="minimized">Minimize</FloatingPanelStageTrigger>
+ *         <FloatingPanelCloseTrigger>Close</FloatingPanelCloseTrigger>
+ *       </FloatingPanelHeader>
+ *       <p>Panel body.</p>
+ *       <FloatingPanelResizeTrigger direction="se" aria-label="Resize panel" />
+ *     </FloatingPanelContent>
+ *   </FloatingPanelPortal>
+ * </FloatingPanel>
+ * ```
+ */
+export declare function FloatingPanel({ children, open: openProp, defaultOpen, onOpenChange, position: positionProp, defaultPosition, onPositionChange, size: sizeProp, defaultSize, onSizeChange, minSize, maxSize, boundary, stage: stageProp, defaultStage, onStageChange, draggable, resizable, step, disabled, getGestureAnnouncement, }: FloatingPanelProps): React.JSX.Element;
+export declare namespace FloatingPanel {
+    var displayName: string;
+}

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import type { FloatingPanelContextValue, FloatingPanelGeometry, FloatingPanelGesture, FloatingPanelProps } from './types.js';
+/**
+ * The default wording of the release announcement, exported so
+ * {@link FloatingPanelProps.getGestureAnnouncement} can defer to it for the
+ * gesture it does not want to re-word.
+ */
+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;
+/**
+ * Root of a draggable, resizable, **non-modal** floating panel — the movable
+ * window pattern. Owns open state, position, size, and stage, and hands them
+ * down to `FloatingPanelTrigger` / `FloatingPanelPortal` /
+ * `FloatingPanelContent` / `FloatingPanelHeader` / `FloatingPanelTitle` /
+ * `FloatingPanelCloseTrigger` / `FloatingPanelResizeTrigger` /
+ * `FloatingPanelStageTrigger` via context. 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.
+ *
+ * @example
+ * ```tsx
+ * <FloatingPanel defaultPosition={{ x: 40, y: 40 }}>
+ *   <FloatingPanelTrigger>Open panel</FloatingPanelTrigger>
+ *   <FloatingPanelPortal>
+ *     <FloatingPanelContent>
+ *       <FloatingPanelHeader aria-label="Drag to move panel">
+ *         <FloatingPanelTitle>Inspector</FloatingPanelTitle>
+ *         <FloatingPanelStageTrigger stage="minimized">Minimize</FloatingPanelStageTrigger>
+ *         <FloatingPanelCloseTrigger>Close</FloatingPanelCloseTrigger>
+ *       </FloatingPanelHeader>
+ *       <p>Panel body.</p>
+ *       <FloatingPanelResizeTrigger direction="se" aria-label="Resize panel" />
+ *     </FloatingPanelContent>
+ *   </FloatingPanelPortal>
+ * </FloatingPanel>
+ * ```
+ */
+export declare function FloatingPanel({ children, open: openProp, defaultOpen, onOpenChange, position: positionProp, defaultPosition, onPositionChange, size: sizeProp, defaultSize, onSizeChange, minSize, maxSize, boundary, stage: stageProp, defaultStage, onStageChange, draggable, resizable, step, disabled, getGestureAnnouncement, }: FloatingPanelProps): React.JSX.Element;
+export declare namespace FloatingPanel {
+    var displayName: string;
+}