@moduix/react 1.1.1 → 2.0.0

package/dist/components/fieldset/Fieldset.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Fieldset_module_default from "./Fieldset.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Fieldset } from "@ark-ui/react/fieldset";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset, useFieldset } from "@ark-ui/react/fieldset";
 //#region src/components/fieldset/Fieldset.tsx
 const FieldsetRoot = forwardRef(function FieldsetRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Fieldset.Root, {
@@ -53,4 +53,4 @@ const Fieldset$1 = Object.assign(FieldsetRoot, {
 	ErrorText: FieldsetErrorText
 });
 //#endregion
-export { Fieldset$1 as Fieldset };
+export { Fieldset$1 as Fieldset, useFieldset };

package/dist/components/fieldset/index.d.ts

@@ -1,2 +1,2 @@
-import { Fieldset } from "./Fieldset.js";
-export { Fieldset };
+import { Fieldset, useFieldset } from "./Fieldset.js";
+export { Fieldset, useFieldset };

package/dist/components/file-upload/FileUpload.css

@@ -132,12 +132,14 @@
   }
 
   .dgDG7a_itemGroup {
+    align-items: flex-start;
     gap: var(--file-upload-item-group-gap, var(--spacing-2));
+    flex-wrap: wrap;
     width: 100%;
     margin: 0;
     padding: 0;
     list-style: none;
-    display: grid;
+    display: flex;
 
     &:empty {
       display: none;
@@ -157,6 +159,7 @@
       var(--file-upload-item-padding-x, var(--spacing-3));
     background-color: var(--file-upload-item-bg, var(--color-background));
     color: var(--file-upload-item-color, var(--color-foreground));
+    flex: 1 0 100%;
     grid-template-columns: minmax(0, 1fr) auto;
     display: grid;
 
@@ -176,8 +179,8 @@
   }
 
   .dgDG7a_itemPreview {
-    width: var(--file-upload-item-preview-size, 2rem);
-    height: var(--file-upload-item-preview-size, 2rem);
+    width: var(--file-upload-item-preview-size, var(--spacing-10));
+    height: var(--file-upload-item-preview-size, var(--spacing-10));
     border-radius: var(--file-upload-item-preview-radius, var(--radius-sm));
     background-color: var(--file-upload-item-preview-bg, var(--color-muted));
     color: var(--file-upload-item-preview-color, var(--color-muted-foreground));
@@ -194,15 +197,37 @@
     height: 100%;
   }
 
+  .dgDG7a_itemPreviewIcon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .dgDG7a_itemMetadata {
+    align-items: center;
+    gap: var(--file-upload-item-row-gap, var(--spacing-1));
+    color: var(--file-upload-item-size-color, var(--color-muted-foreground));
+    font-size: var(--file-upload-item-size-font-size, var(--text-xs));
+    line-height: var(--file-upload-item-size-line-height, var(--line-height-text-xs));
+    grid-column: 1;
+    display: flex;
+
+    & > [data-slot="file-upload-item-size-text"]:before {
+      margin-right: var(--file-upload-item-row-gap, var(--spacing-1));
+      content: "·";
+    }
+  }
+
   .dgDG7a_itemName {
     min-width: 0;
     color: var(--file-upload-item-name-color, currentColor);
     font-size: var(--file-upload-item-name-font-size, var(--text-sm));
     font-weight: var(--file-upload-item-name-font-weight, var(--weight-medium));
     line-height: var(--file-upload-item-name-line-height, var(--line-height-text-sm));
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
     grid-column: 1;
+    display: -webkit-box;
     overflow: hidden;
   }
 
@@ -217,11 +242,11 @@
     grid-column: 1;
   }
 
-  .dgDG7a_item:has([data-slot="file-upload-item-preview"]) .dgDG7a_itemSizeText {
+  .dgDG7a_item:has([data-slot="file-upload-item-preview"]) .dgDG7a_itemSizeText, .dgDG7a_item:has([data-slot="file-upload-item-preview"]) .dgDG7a_itemMetadata {
     grid-column: 2;
   }
 
-  .dgDG7a_itemDeleteTrigger, .dgDG7a_clearTrigger {
+  .dgDG7a_itemDeleteTrigger {
     box-sizing: border-box;
     width: var(--file-upload-action-size, 2rem);
     height: var(--file-upload-action-size, 2rem);
@@ -277,14 +302,62 @@
     grid-column: 3;
   }
 
+  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) {
+    flex: 0 min(100%, 10rem);
+    grid-template-rows: auto auto auto;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    min-height: 0;
+  }
+
+  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) .dgDG7a_itemPreview {
+    aspect-ratio: 1;
+    grid-area: 1 / 1 / auto / -1;
+    width: 100%;
+    height: auto;
+  }
+
+  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) .dgDG7a_itemName {
+    grid-area: 2 / 1;
+    align-self: end;
+  }
+
+  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) .dgDG7a_itemMetadata {
+    grid-area: 3 / 1;
+  }
+
+  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) .dgDG7a_itemDeleteTrigger {
+    grid-area: 2 / 2 / span 2;
+    align-self: center;
+  }
+
   .dgDG7a_clearTrigger {
+    --close-button-size: var(--file-upload-action-size, 2rem);
+    --close-button-radius: var(--file-upload-action-radius, var(--radius-sm));
+    --close-button-bg: var(--file-upload-action-bg, transparent);
+    --close-button-bg-hover: var(--file-upload-action-bg-hover, var(--color-muted));
+    --close-button-color: var(--file-upload-clear-trigger-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--file-upload-action-color-hover, var(--color-foreground));
+    --close-button-icon-size: var(--file-upload-action-icon-size, 1rem);
+    --close-button-transition: var(--file-upload-transition, var(--transition-default));
+    --close-button-focus-ring-width: var(--file-upload-focus-ring-width, var(--border-width-md));
+    --close-button-focus-ring-color: var(--file-upload-focus-ring-color, var(--color-ring));
+    --close-button-focus-ring-offset: var(--file-upload-focus-ring-offset, var(--border-width-sm));
+    --close-button-disabled-opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
     align-self: flex-start;
+  }
+
+  .dgDG7a_clearTriggerWithContent {
     gap: var(--file-upload-clear-trigger-gap, var(--spacing-2));
     width: auto;
     padding-inline: var(--file-upload-clear-trigger-padding-x, var(--spacing-2));
-    color: var(--file-upload-clear-trigger-color, var(--color-muted-foreground));
     font: inherit;
     font-size: var(--file-upload-clear-trigger-font-size, var(--text-sm));
     line-height: var(--file-upload-clear-trigger-line-height, var(--line-height-text-sm));
   }
+
+  .dgDG7a_clearTrigger[data-readonly] {
+    pointer-events: none;
+    opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+  }
 }

package/dist/components/file-upload/FileUpload.d.ts

@@ -1,28 +1,45 @@
-import { ComponentProps } from "react";
-import { FileUpload } from "@ark-ui/react/file-upload";
+import { FileIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { HTMLArkProps } from "@ark-ui/react/factory";
+import { ComponentProps, ReactNode } from "react";
+import { FileUpload, useFileUpload, useFileUploadContext } from "@ark-ui/react/file-upload";
 
 //#region src/components/file-upload/FileUpload.d.ts
 declare function FileUploadDropzoneIcon({
   className,
   children,
   ...props
-}: ComponentProps<'span'>): import("react").JSX.Element;
+}: HTMLArkProps<'span'>): import("react").JSX.Element;
+declare function FileUploadItemPreviewIcon({
+  className,
+  ...props
+}: ComponentProps<typeof FileIcon>): import("react").JSX.Element;
+declare function FileUploadItemMetadata({
+  file,
+  className,
+  ...props
+}: HTMLArkProps<'div'> & {
+  file: File;
+}): import("react").JSX.Element;
+declare function FileUploadItems(): import("react").JSX.Element[];
 declare const FileUpload$1: import("react").ForwardRefExoticComponent<Omit<FileUpload.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<FileUpload.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<FileUpload.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: FileUpload.ContextProps) => ReactNode;
   Label: import("react").ForwardRefExoticComponent<Omit<FileUpload.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Dropzone: import("react").ForwardRefExoticComponent<Omit<FileUpload.DropzoneProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   DropzoneIcon: typeof FileUploadDropzoneIcon;
   Trigger: import("react").ForwardRefExoticComponent<Omit<FileUpload.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<FileUpload.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   ItemGroup: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemGroupProps & import("react").RefAttributes<HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
   Item: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemProps & import("react").RefAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+  Items: typeof FileUploadItems;
   ItemPreview: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemPreviewProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
   ItemPreviewImage: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemPreviewImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+  ItemPreviewIcon: typeof FileUploadItemPreviewIcon;
   ItemName: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemNameProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemMetadata: typeof FileUploadItemMetadata;
   ItemSizeText: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemSizeTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemDeleteTrigger: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemDeleteTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   ClearTrigger: import("react").ForwardRefExoticComponent<Omit<FileUpload.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //#endregion
-export { FileUpload$1 as FileUpload };
+export { FileUpload$1 as FileUpload, useFileUpload, useFileUploadContext };

package/dist/components/file-upload/FileUpload.js

@@ -1,25 +1,31 @@
-import { CloseIcon, TrashIcon, UploadIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseIcon, FileIcon, TrashIcon, UploadIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import FileUpload_module_default from "./FileUpload.module.js";
-import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { FileUpload } from "@ark-ui/react/file-upload";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { FileUpload, useFileUpload, useFileUploadContext } from "@ark-ui/react/file-upload";
 //#region src/components/file-upload/FileUpload.tsx
-const FileUploadRoot = forwardRef(function FileUploadRoot({ className, ...props }, ref) {
+const FileUploadRoot = forwardRef(function FileUploadRoot({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(FileUpload.Root, {
 		ref,
+		asChild,
 		"data-slot": "file-upload-root",
 		className: clsx(FileUpload_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
-const FileUploadRootProvider = forwardRef(function FileUploadRootProvider({ className, ...props }, ref) {
+const FileUploadRootProvider = forwardRef(function FileUploadRootProvider({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(FileUpload.RootProvider, {
 		ref,
+		asChild,
 		"data-slot": "file-upload-root-provider",
 		className: clsx(FileUpload_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
 const FileUploadLabel = forwardRef(function FileUploadLabel({ className, ...props }, ref) {
@@ -39,7 +45,7 @@ const FileUploadDropzone = forwardRef(function FileUploadDropzone({ className, .
 	});
 });
 function FileUploadDropzoneIcon({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsx(ark.span, {
 		"aria-hidden": "true",
 		"data-slot": "file-upload-dropzone-icon",
 		className: clsx(FileUpload_module_default.dropzoneIcon, normalizeClassName(className)),
@@ -55,13 +61,12 @@ const FileUploadTrigger = forwardRef(function FileUploadTrigger({ className, ...
 		...props
 	});
 });
-const FileUploadHiddenInput = forwardRef(function FileUploadHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(FileUpload.HiddenInput, {
-		ref,
-		"data-slot": "file-upload-hidden-input",
-		...props
-	});
-});
+function withHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(FileUpload.HiddenInput, { "data-slot": "file-upload-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
 const FileUploadItemGroup = forwardRef(function FileUploadItemGroup({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(FileUpload.ItemGroup, {
 		ref,
@@ -94,6 +99,20 @@ const FileUploadItemPreviewImage = forwardRef(function FileUploadItemPreviewImag
 		...props
 	});
 });
+function FileUploadItemPreviewIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx(FileIcon, {
+		"data-slot": "file-upload-item-preview-icon",
+		className: clsx(FileUpload_module_default.itemPreviewIcon, normalizeClassName(className)),
+		...props
+	});
+}
+function getFileTypeLabel(file) {
+	const extension = file.name.split(".").pop();
+	return extension ? extension.toUpperCase() : file.type || "FILE";
+}
+function isImageFile(file) {
+	return file.type.startsWith("image/") || /\.(avif|bmp|gif|jpe?g|png|svg|webp)$/i.test(file.name);
+}
 const FileUploadItemName = forwardRef(function FileUploadItemName({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(FileUpload.ItemName, {
 		ref,
@@ -110,6 +129,14 @@ const FileUploadItemSizeText = forwardRef(function FileUploadItemSizeText({ clas
 		...props
 	});
 });
+function FileUploadItemMetadata({ file, className, ...props }) {
+	return /* @__PURE__ */ jsxs(ark.div, {
+		"data-slot": "file-upload-item-metadata",
+		className: clsx(FileUpload_module_default.itemMetadata, normalizeClassName(className)),
+		...props,
+		children: [/* @__PURE__ */ jsx(ark.span, { children: getFileTypeLabel(file) }), /* @__PURE__ */ jsx(FileUploadItemSizeText, {})]
+	});
+}
 const FileUploadItemDeleteTrigger = forwardRef(function FileUploadItemDeleteTrigger({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(FileUpload.ItemDeleteTrigger, {
 		ref,
@@ -119,31 +146,62 @@ const FileUploadItemDeleteTrigger = forwardRef(function FileUploadItemDeleteTrig
 		children: children ?? /* @__PURE__ */ jsx(TrashIcon, {})
 	});
 });
-const FileUploadClearTrigger = forwardRef(function FileUploadClearTrigger({ className, children, ...props }, ref) {
+function FileUploadItems() {
+	const { acceptedFiles } = useFileUploadContext();
+	return acceptedFiles.map((file) => /* @__PURE__ */ jsxs(FileUploadItem, {
+		file,
+		children: [
+			isImageFile(file) ? /* @__PURE__ */ jsx(FileUploadItemPreview, { children: /* @__PURE__ */ jsx(FileUploadItemPreviewImage, {}) }) : /* @__PURE__ */ jsx(FileUploadItemPreview, { children: /* @__PURE__ */ jsx(FileUploadItemPreviewIcon, {}) }),
+			/* @__PURE__ */ jsx(FileUploadItemName, {}),
+			/* @__PURE__ */ jsx(FileUploadItemMetadata, { file }),
+			/* @__PURE__ */ jsx(FileUploadItemDeleteTrigger, { "aria-label": `Remove ${file.name}` })
+		]
+	}, `${file.name}-${file.size}`));
+}
+const FileUploadClearTrigger = forwardRef(function FileUploadClearTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	const triggerClassName = clsx(FileUpload_module_default.clearTrigger, children != null && FileUpload_module_default.clearTriggerWithContent, normalizeClassName(className));
+	if (asChild) return /* @__PURE__ */ jsx(FileUpload.ClearTrigger, {
+		ref,
+		asChild: true,
+		"data-slot": "file-upload-clear-trigger",
+		className: triggerClassName,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		...props,
+		children
+	});
 	return /* @__PURE__ */ jsx(FileUpload.ClearTrigger, {
 		ref,
+		asChild: true,
 		"data-slot": "file-upload-clear-trigger",
-		className: clsx(FileUpload_module_default.clearTrigger, normalizeClassName(className)),
+		className: triggerClassName,
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+		})
 	});
 });
 const FileUpload$1 = Object.assign(FileUploadRoot, {
 	Root: FileUploadRoot,
 	RootProvider: FileUploadRootProvider,
+	Context: FileUpload.Context,
 	Label: FileUploadLabel,
 	Dropzone: FileUploadDropzone,
 	DropzoneIcon: FileUploadDropzoneIcon,
 	Trigger: FileUploadTrigger,
-	HiddenInput: FileUploadHiddenInput,
 	ItemGroup: FileUploadItemGroup,
 	Item: FileUploadItem,
+	Items: FileUploadItems,
 	ItemPreview: FileUploadItemPreview,
 	ItemPreviewImage: FileUploadItemPreviewImage,
+	ItemPreviewIcon: FileUploadItemPreviewIcon,
 	ItemName: FileUploadItemName,
+	ItemMetadata: FileUploadItemMetadata,
 	ItemSizeText: FileUploadItemSizeText,
 	ItemDeleteTrigger: FileUploadItemDeleteTrigger,
 	ClearTrigger: FileUploadClearTrigger
 });
 //#endregion
-export { FileUpload$1 as FileUpload };
+export { FileUpload$1 as FileUpload, useFileUpload, useFileUploadContext };

package/dist/components/file-upload/FileUpload.module.js

@@ -2,13 +2,16 @@ import './FileUpload.css';
 //#region src/components/file-upload/FileUpload.module.css
 var FileUpload_module_default = {
 	"clearTrigger": "dgDG7a_clearTrigger",
+	"clearTriggerWithContent": "dgDG7a_clearTriggerWithContent",
 	"dropzone": "dgDG7a_dropzone",
 	"dropzoneIcon": "dgDG7a_dropzoneIcon",
 	"item": "dgDG7a_item",
 	"itemDeleteTrigger": "dgDG7a_itemDeleteTrigger",
 	"itemGroup": "dgDG7a_itemGroup",
+	"itemMetadata": "dgDG7a_itemMetadata",
 	"itemName": "dgDG7a_itemName",
 	"itemPreview": "dgDG7a_itemPreview",
+	"itemPreviewIcon": "dgDG7a_itemPreviewIcon",
 	"itemPreviewImage": "dgDG7a_itemPreviewImage",
 	"itemSizeText": "dgDG7a_itemSizeText",
 	"label": "dgDG7a_label",

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

@@ -1,2 +1,2 @@
-import { FileUpload } from "./FileUpload.js";
-export { FileUpload };
+import { FileUpload, useFileUpload, useFileUploadContext } from "./FileUpload.js";
+export { FileUpload, useFileUpload, useFileUploadContext };

package/dist/components/floating-panel/FloatingPanel.css

@@ -73,12 +73,16 @@
     overflow: hidden;
 
     &[data-state="open"] {
-      animation: L7Dmqq_floating-panel-enter var(--floating-panel-transition, var(--duration-fast)) both;
+      animation: L7Dmqq_floating-panel-enter
+        var(--floating-panel-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        both;
     }
 
     &[data-state="closed"] {
       pointer-events: none;
-      animation: L7Dmqq_floating-panel-exit var(--floating-panel-transition, var(--duration-fast)) both;
+      animation: L7Dmqq_floating-panel-exit
+        var(--floating-panel-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        both;
     }
 
     &[data-behind] {
@@ -301,19 +305,19 @@
 
   @keyframes L7Dmqq_floating-panel-enter {
     from {
-      opacity: var(--floating-panel-starting-opacity, 0);
-      translate: var(--floating-panel-starting-translate-x, 0)
-        var(--floating-panel-starting-translate-y, 0);
-      scale: var(--floating-panel-starting-scale, var(--scale-popup));
+      opacity: var(--floating-panel-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--floating-panel-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--floating-panel-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
+      scale: var(--floating-panel-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
     }
   }
 
   @keyframes L7Dmqq_floating-panel-exit {
     to {
-      opacity: var(--floating-panel-ending-opacity, 0);
-      translate: var(--floating-panel-ending-translate-x, 0)
-        var(--floating-panel-ending-translate-y, 0);
-      scale: var(--floating-panel-ending-scale, var(--scale-popup));
+      opacity: var(--floating-panel-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--floating-panel-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--floating-panel-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
+      scale: var(--floating-panel-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
     }
   }
 }

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

@@ -1,12 +1,13 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { FloatingPanel } from "@ark-ui/react/floating-panel";
+import { FloatingPanel, FloatingPanelResizeTriggerAxis } from "@ark-ui/react/floating-panel";
 
 //#region src/components/floating-panel/FloatingPanel.d.ts
-declare const resizeTriggerAxes: ("s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne")[];
+declare const resizeTriggerAxes: ("s" | "n" | "e" | "w" | "ne" | "se" | "sw" | "nw")[];
 type FloatingPanelRootProps = ComponentProps<typeof FloatingPanel.Root> & OverlayPortalProps;
 type FloatingPanelRootProviderProps = ComponentProps<typeof FloatingPanel.RootProvider> & OverlayPortalProps;
 declare function FloatingPanelRoot({
+  closeOnEscape,
   persistRect,
   portalled,
   portalRef,
@@ -21,8 +22,13 @@ declare function FloatingPanelFooter({
   className,
   ...props
 }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function FloatingPanelResizeTriggerGroup(): import("react").JSX.Element;
+declare function FloatingPanelResizeTriggerGroup({
+  axes
+}: {
+  axes?: readonly FloatingPanelResizeTriggerAxis[];
+}): import("react").JSX.Element;
 declare const FloatingPanel$1: typeof FloatingPanelRoot & {
+  Context: (props: FloatingPanel.ContextProps) => import("react").ReactNode;
   Root: typeof FloatingPanelRoot;
   RootProvider: typeof FloatingPanelRootProvider;
   Trigger: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
@@ -40,6 +46,8 @@ declare const FloatingPanel$1: typeof FloatingPanelRoot & {
   ResizeTrigger: import("react").ForwardRefExoticComponent<Omit<FloatingPanel.ResizeTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ResizeTriggerGroup: typeof FloatingPanelResizeTriggerGroup;
   DragIndicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  useFloatingPanel: (props?: import("@ark-ui/react/floating-panel").UseFloatingPanelProps) => import("@ark-ui/react/floating-panel").UseFloatingPanelReturn;
+  useFloatingPanelContext: () => import("@ark-ui/react/floating-panel").UseFloatingPanelContext;
 };
 //#endregion
 export { FloatingPanel$1 as FloatingPanel, resizeTriggerAxes };

package/dist/components/floating-panel/FloatingPanel.js

@@ -1,16 +1,17 @@
-import { GripIcon, MaximizeIcon, MinusIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { GripIcon, MaximizeIcon, MinusIcon, RestoreIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import FloatingPanel_module_default from "./FloatingPanel.module.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { FloatingPanel } from "@ark-ui/react/floating-panel";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingPanel, useFloatingPanel, useFloatingPanelContext } from "@ark-ui/react/floating-panel";
 //#region src/components/floating-panel/FloatingPanel.tsx
 const DEFAULT_CLOSE_BUTTON_LABEL = "Close panel";
 const DEFAULT_MINIMIZE_LABEL = "Minimize panel";
 const DEFAULT_MAXIMIZE_LABEL = "Maximize panel";
+const DEFAULT_RESTORE_LABEL = "Restore panel";
 const resizeTriggerAxes = [
 	"n",
 	"e",
@@ -21,11 +22,12 @@ const resizeTriggerAxes = [
 	"sw",
 	"nw"
 ];
-function FloatingPanelRoot({ persistRect = true, portalled, portalRef, ...props }) {
+function FloatingPanelRoot({ closeOnEscape = true, persistRect = true, portalled, portalRef, ...props }) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
 		portalled,
 		portalRef,
 		children: /* @__PURE__ */ jsx(FloatingPanel.Root, {
+			closeOnEscape,
 			persistRect,
 			...props
 		})
@@ -97,7 +99,7 @@ const FloatingPanelControl = forwardRef(function FloatingPanelControl({ classNam
 });
 const FloatingPanelStageTrigger = forwardRef(function FloatingPanelStageTrigger({ asChild, className, children, stage, "aria-label": ariaLabel, ...props }, ref) {
 	const shouldRenderDefaultIcon = children == null && !asChild;
-	const defaultAriaLabel = shouldRenderDefaultIcon && stage === "minimized" ? DEFAULT_MINIMIZE_LABEL : shouldRenderDefaultIcon && stage === "maximized" ? DEFAULT_MAXIMIZE_LABEL : void 0;
+	const defaultAriaLabel = shouldRenderDefaultIcon && stage === "minimized" ? DEFAULT_MINIMIZE_LABEL : shouldRenderDefaultIcon && stage === "maximized" ? DEFAULT_MAXIMIZE_LABEL : shouldRenderDefaultIcon && stage === "default" ? DEFAULT_RESTORE_LABEL : void 0;
 	return /* @__PURE__ */ jsxs(FloatingPanel.StageTrigger, {
 		ref,
 		asChild,
@@ -109,7 +111,8 @@ const FloatingPanelStageTrigger = forwardRef(function FloatingPanelStageTrigger(
 		children: [
 			children,
 			shouldRenderDefaultIcon && stage === "minimized" ? /* @__PURE__ */ jsx(MinusIcon, {}) : null,
-			shouldRenderDefaultIcon && stage === "maximized" ? /* @__PURE__ */ jsx(MaximizeIcon, {}) : null
+			shouldRenderDefaultIcon && stage === "maximized" ? /* @__PURE__ */ jsx(MaximizeIcon, {}) : null,
+			shouldRenderDefaultIcon && stage === "default" ? /* @__PURE__ */ jsx(RestoreIcon, {}) : null
 		]
 	});
 });
@@ -158,8 +161,8 @@ const FloatingPanelResizeTrigger = forwardRef(function FloatingPanelResizeTrigge
 		...props
 	});
 });
-function FloatingPanelResizeTriggerGroup() {
-	return /* @__PURE__ */ jsx(Fragment, { children: resizeTriggerAxes.map((axis) => /* @__PURE__ */ jsx(FloatingPanelResizeTrigger, { axis }, axis)) });
+function FloatingPanelResizeTriggerGroup({ axes = resizeTriggerAxes }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: axes.map((axis) => /* @__PURE__ */ jsx(FloatingPanelResizeTrigger, { axis }, axis)) });
 }
 const FloatingPanelDragIndicator = forwardRef(function FloatingPanelDragIndicator({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx("span", {
@@ -172,6 +175,7 @@ const FloatingPanelDragIndicator = forwardRef(function FloatingPanelDragIndicato
 	});
 });
 const FloatingPanel$1 = Object.assign(FloatingPanelRoot, {
+	Context: FloatingPanel.Context,
 	Root: FloatingPanelRoot,
 	RootProvider: FloatingPanelRootProvider,
 	Trigger: FloatingPanelTrigger,
@@ -188,7 +192,9 @@ const FloatingPanel$1 = Object.assign(FloatingPanelRoot, {
 	Footer: FloatingPanelFooter,
 	ResizeTrigger: FloatingPanelResizeTrigger,
 	ResizeTriggerGroup: FloatingPanelResizeTriggerGroup,
-	DragIndicator: FloatingPanelDragIndicator
+	DragIndicator: FloatingPanelDragIndicator,
+	useFloatingPanel,
+	useFloatingPanelContext
 });
 //#endregion
 export { FloatingPanel$1 as FloatingPanel, resizeTriggerAxes };

package/dist/components/heading/Heading.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Heading_module_default from "./Heading.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/heading/Heading.tsx
 const elements = {
 	h1: ark.h1,

package/dist/components/highlight/Highlight.js

@@ -1,7 +1,7 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Highlight_module_default from "./Highlight.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 import { Highlight } from "@ark-ui/react/highlight";
 //#region src/components/highlight/Highlight.tsx
 function HighlightRoot({ className, ...props }) {