@moduix/react 1.1.1 → 2.1.0

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

@@ -1,8 +1,8 @@
 @layer ui.components {
   .L7Dmqq_trigger {
     box-sizing: border-box;
-    min-height: var(--floating-panel-trigger-height, var(--size-lg));
-    padding: var(--floating-panel-trigger-padding-y, .5rem)
+    min-height: var(--floating-panel-trigger-height, var(--size-md));
+    padding: var(--floating-panel-trigger-padding-y, var(--spacing-1))
       var(--floating-panel-trigger-padding-x, var(--spacing-3));
     border: var(--floating-panel-trigger-border-width, var(--border-width-sm)) solid
       var(--floating-panel-trigger-border-color, var(--color-border));
@@ -35,9 +35,9 @@
     }
 
     &:focus-visible {
-      outline: var(--floating-panel-focus-ring-width, var(--floating-panel-trigger-border-width, var(--border-width-sm)))
+      outline: var(--floating-panel-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
         solid var(--floating-panel-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--floating-panel-focus-ring-width, var(--floating-panel-trigger-border-width, var(--border-width-sm))) *
+      outline-offset: calc(var(--floating-panel-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
           -1);
     }
 
@@ -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] {
@@ -160,8 +164,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--floating-panel-control-icon-size, 1rem);
-      height: var(--floating-panel-control-icon-size, 1rem);
+      width: var(--floating-panel-control-icon-size, var(--spacing-4));
+      height: var(--floating-panel-control-icon-size, var(--spacing-4));
     }
 
     @media (hover: hover) {
@@ -171,9 +175,9 @@
     }
 
     &:focus-visible {
-      outline: var(--floating-panel-focus-ring-width, var(--floating-panel-control-border-width, var(--border-width-sm)))
+      outline: var(--floating-panel-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
         solid var(--floating-panel-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--floating-panel-focus-ring-width, var(--floating-panel-control-border-width, var(--border-width-sm))) *
+      outline-offset: calc(var(--floating-panel-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
           -1);
     }
 
@@ -192,8 +196,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--floating-panel-drag-indicator-size, 1rem);
-      height: var(--floating-panel-drag-indicator-size, 1rem);
+      width: var(--floating-panel-drag-indicator-size, var(--spacing-4));
+      height: var(--floating-panel-drag-indicator-size, var(--spacing-4));
     }
   }
 
@@ -236,61 +240,61 @@
     position: absolute;
 
     &[data-axis="n"], &[data-axis="s"] {
-      left: var(--floating-panel-resize-edge-inset, .75rem);
-      width: calc(100% - (var(--floating-panel-resize-edge-inset, .75rem) * 2));
-      height: var(--floating-panel-resize-edge-size, .5rem);
+      left: var(--floating-panel-resize-edge-inset, var(--spacing-3));
+      width: calc(100% - (var(--floating-panel-resize-edge-inset, var(--spacing-3)) * 2));
+      height: var(--floating-panel-resize-edge-size, var(--spacing-2));
       cursor: ns-resize;
     }
 
     &[data-axis="n"] {
-      top: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+      top: calc(var(--floating-panel-resize-edge-size, var(--spacing-2)) / -2);
     }
 
     &[data-axis="s"] {
-      bottom: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+      bottom: calc(var(--floating-panel-resize-edge-size, var(--spacing-2)) / -2);
     }
 
     &[data-axis="e"], &[data-axis="w"] {
-      top: var(--floating-panel-resize-edge-inset, .75rem);
-      width: var(--floating-panel-resize-edge-size, .5rem);
-      height: calc(100% - (var(--floating-panel-resize-edge-inset, .75rem) * 2));
+      top: var(--floating-panel-resize-edge-inset, var(--spacing-3));
+      width: var(--floating-panel-resize-edge-size, var(--spacing-2));
+      height: calc(100% - (var(--floating-panel-resize-edge-inset, var(--spacing-3)) * 2));
       cursor: ew-resize;
     }
 
     &[data-axis="e"] {
-      right: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+      right: calc(var(--floating-panel-resize-edge-size, var(--spacing-2)) / -2);
     }
 
     &[data-axis="w"] {
-      left: calc(var(--floating-panel-resize-edge-size, .5rem) / -2);
+      left: calc(var(--floating-panel-resize-edge-size, var(--spacing-2)) / -2);
     }
 
     &[data-axis="ne"], &[data-axis="nw"], &[data-axis="se"], &[data-axis="sw"] {
-      width: var(--floating-panel-resize-corner-size, .75rem);
-      height: var(--floating-panel-resize-corner-size, .75rem);
+      width: var(--floating-panel-resize-corner-size, var(--spacing-3));
+      height: var(--floating-panel-resize-corner-size, var(--spacing-3));
     }
 
     &[data-axis="ne"] {
-      top: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
-      right: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      top: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
+      right: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
       cursor: nesw-resize;
     }
 
     &[data-axis="nw"] {
-      top: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
-      left: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      top: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
+      left: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
       cursor: nwse-resize;
     }
 
     &[data-axis="se"] {
-      right: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
-      bottom: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      right: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
+      bottom: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
       cursor: nwse-resize;
     }
 
     &[data-axis="sw"] {
-      bottom: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
-      left: calc(var(--floating-panel-resize-corner-size, .75rem) / -2);
+      bottom: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
+      left: calc(var(--floating-panel-resize-corner-size, var(--spacing-3)) / -2);
       cursor: nesw-resize;
     }
 
@@ -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")[];
 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.css

@@ -1,7 +1,7 @@
 @layer ui.components {
   .UPU85W_root {
     padding-block: var(--highlight-padding-y, .0625rem);
-    padding-inline: var(--highlight-padding-x, .25rem);
+    padding-inline: var(--highlight-padding-x, var(--spacing-1));
     border-radius: var(--highlight-radius, var(--radius-xs));
     background-color: var(--highlight-bg, color-mix(in oklab, var(--color-warning) 40%, var(--color-accent)));
     color: var(--highlight-color, var(--color-foreground));

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 }) {

package/dist/components/hover-card/HoverCard.css

@@ -2,7 +2,7 @@
   ._0VaKFG_trigger {
     --hover-card-trigger-current-color: var(--hover-card-trigger-color, var(--color-primary));
     align-items: center;
-    gap: var(--hover-card-trigger-gap, .25rem);
+    gap: var(--hover-card-trigger-gap, var(--spacing-1));
     color: var(--hover-card-trigger-current-color);
     font: inherit;
     text-decoration-line: underline;
@@ -27,9 +27,9 @@
 
     &:focus-visible {
       border-radius: var(--hover-card-trigger-focus-radius, var(--radius-xs));
-      outline: var(--hover-card-focus-ring-width, var(--border-width-sm)) solid
-        var(--hover-card-focus-ring-color, var(--color-ring));
-      outline-offset: var(--hover-card-trigger-focus-offset, 1px);
+      outline: var(--hover-card-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--hover-card-focus-ring-color, var(--color-ring));
+      outline-offset: var(--hover-card-trigger-focus-offset, var(--focus-ring-offset));
       text-decoration-line: none;
     }
 
@@ -67,16 +67,20 @@
     overflow: visible;
 
     &[data-state="open"] {
-      animation: _0VaKFG_hover-card-enter var(--hover-card-transition, var(--duration-fast)) both;
+      animation: _0VaKFG_hover-card-enter
+        var(--hover-card-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        both;
     }
 
     &[data-state="closed"] {
-      animation: _0VaKFG_hover-card-exit var(--hover-card-transition, var(--duration-fast)) both;
+      animation: _0VaKFG_hover-card-exit
+        var(--hover-card-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        both;
     }
   }
 
   ._0VaKFG_arrow {
-    --arrow-size: var(--hover-card-arrow-size, .625rem);
+    --arrow-size: var(--hover-card-arrow-size, var(--spacing-2-5));
     --arrow-background: var(--hover-card-bg, var(--color-popover));
   }
 
@@ -89,19 +93,19 @@
 
   @keyframes _0VaKFG_hover-card-enter {
     from {
-      opacity: var(--hover-card-content-starting-opacity, 0);
-      translate: var(--hover-card-content-starting-translate-x, 0)
-        var(--hover-card-content-starting-translate-y, 0);
-      scale: var(--hover-card-content-starting-scale, var(--scale-popup));
+      opacity: var(--hover-card-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--hover-card-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--hover-card-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
+      scale: var(--hover-card-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
     }
   }
 
   @keyframes _0VaKFG_hover-card-exit {
     to {
-      opacity: var(--hover-card-content-ending-opacity, 0);
-      translate: var(--hover-card-content-ending-translate-x, 0)
-        var(--hover-card-content-ending-translate-y, 0);
-      scale: var(--hover-card-content-ending-scale, var(--scale-popup));
+      opacity: var(--hover-card-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--hover-card-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--hover-card-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
+      scale: var(--hover-card-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
     }
   }
 }

package/dist/components/hover-card/HoverCard.d.ts

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { HoverCard } from "@ark-ui/react/hover-card";
+import { HoverCard, useHoverCard, useHoverCardContext } from "@ark-ui/react/hover-card";
 
 //#region src/components/hover-card/HoverCard.d.ts
 type HoverCardRootProps = ComponentProps<typeof HoverCard.Root> & OverlayPortalProps;
@@ -23,6 +23,7 @@ declare const HoverCard$1: typeof HoverCardRoot & {
   Content: import("react").ForwardRefExoticComponent<Omit<HoverCard.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Arrow: import("react").ForwardRefExoticComponent<Omit<HoverCard.ArrowProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ArrowTip: import("react").ForwardRefExoticComponent<Omit<HoverCard.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: HoverCard.ContextProps) => import("react").ReactNode;
 };
 //#endregion
-export { HoverCard$1 as HoverCard };
+export { HoverCard$1 as HoverCard, useHoverCard, useHoverCardContext };

package/dist/components/hover-card/HoverCard.js

@@ -1,10 +1,10 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import HoverCard_module_default from "./HoverCard.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { HoverCard } from "@ark-ui/react/hover-card";
+import { jsx } from "react/jsx-runtime";
+import { HoverCard, useHoverCard, useHoverCardContext } from "@ark-ui/react/hover-card";
 //#region src/components/hover-card/HoverCard.tsx
 function HoverCardRoot({ portalled, portalRef, ...props }) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
@@ -75,7 +75,8 @@ const HoverCard$1 = Object.assign(HoverCardRoot, {
 	Positioner: HoverCardPositioner,
 	Content: HoverCardContent,
 	Arrow: HoverCardArrow,
-	ArrowTip: HoverCardArrowTip
+	ArrowTip: HoverCardArrowTip,
+	Context: HoverCard.Context
 });
 //#endregion
-export { HoverCard$1 as HoverCard };
+export { HoverCard$1 as HoverCard, useHoverCard, useHoverCardContext };

package/dist/components/hover-card/index.d.ts

@@ -1,2 +1,2 @@
-import { HoverCard } from "./HoverCard.js";
-export { HoverCard };
+import { HoverCard, useHoverCard, useHoverCardContext } from "./HoverCard.js";
+export { HoverCard, useHoverCard, useHoverCardContext };

package/dist/components/image/Image.css

@@ -0,0 +1,7 @@
+@layer ui.components {
+  .gMmqtq_root {
+    box-sizing: border-box;
+    border-radius: var(--image-radius, var(--radius-md));
+    display: block;
+  }
+}

package/dist/components/image/Image.d.ts

@@ -0,0 +1,12 @@
+import { ImageProps, SourceProps } from "@unpic/react";
+
+//#region src/components/image/Image.d.ts
+type ImageSourceProps = SourceProps & {
+  'data-slot'?: string;
+};
+declare const Image$1: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>> & {
+  Root: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+  Source: import("react").ForwardRefExoticComponent<ImageSourceProps & import("react").RefAttributes<HTMLSourceElement>>;
+};
+//#endregion
+export { Image$1 as Image };

package/dist/components/image/Image.js

@@ -0,0 +1,28 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Image_module_default from "./Image.module.js";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Image, Source } from "@unpic/react";
+//#region src/components/image/Image.tsx
+const ImageRoot = forwardRef(function ImageRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Image, {
+		ref,
+		"data-slot": "image-root",
+		className: clsx(Image_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const ImageSource = forwardRef(function ImageSource(props, ref) {
+	return /* @__PURE__ */ jsx(Source, {
+		ref,
+		"data-slot": "image-source",
+		...props
+	});
+});
+const Image$1 = Object.assign(ImageRoot, {
+	Root: ImageRoot,
+	Source: ImageSource
+});
+//#endregion
+export { Image$1 as Image };

package/dist/components/image/Image.module.js

@@ -0,0 +1,5 @@
+import './Image.css';
+//#region src/components/image/Image.module.css
+var Image_module_default = { "root": "gMmqtq_root" };
+//#endregion
+export { Image_module_default as default };

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

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

package/dist/components/image-cropper/ImageCropper.css

@@ -23,26 +23,30 @@
           var(--image-cropper-checker-color, color-mix(in oklab, var(--color-muted) 72%, transparent))
             25%,
           transparent 25%)
-        0 0 / var(--image-cropper-checker-size, 1rem) var(--image-cropper-checker-size, 1rem),
+        0 0 / var(--image-cropper-checker-size, var(--spacing-4))
+        var(--image-cropper-checker-size, var(--spacing-4)),
       linear-gradient(45deg,
           transparent 75%,
           var(--image-cropper-checker-color, color-mix(in oklab, var(--color-muted) 72%, transparent))
             75%)
-        0 0 / var(--image-cropper-checker-size, 1rem) var(--image-cropper-checker-size, 1rem),
+        0 0 / var(--image-cropper-checker-size, var(--spacing-4))
+        var(--image-cropper-checker-size, var(--spacing-4)),
       linear-gradient(45deg,
           transparent 75%,
           var(--image-cropper-checker-color, color-mix(in oklab, var(--color-muted) 72%, transparent))
             75%)
-        calc(var(--image-cropper-checker-size, 1rem) / -2)
-        calc(var(--image-cropper-checker-size, 1rem) / -2) / var(--image-cropper-checker-size, 1rem)
-        var(--image-cropper-checker-size, 1rem),
+        calc(var(--image-cropper-checker-size, var(--spacing-4)) / -2)
+        calc(var(--image-cropper-checker-size, var(--spacing-4)) / -2) /
+        var(--image-cropper-checker-size, var(--spacing-4))
+        var(--image-cropper-checker-size, var(--spacing-4)),
       linear-gradient(45deg,
           var(--image-cropper-checker-color, color-mix(in oklab, var(--color-muted) 72%, transparent))
             25%,
           var(--image-cropper-viewport-bg, var(--color-background)) 25%)
-        calc(var(--image-cropper-checker-size, 1rem) / -2)
-        calc(var(--image-cropper-checker-size, 1rem) / -2) / var(--image-cropper-checker-size, 1rem)
-        var(--image-cropper-checker-size, 1rem);
+        calc(var(--image-cropper-checker-size, var(--spacing-4)) / -2)
+        calc(var(--image-cropper-checker-size, var(--spacing-4)) / -2) /
+        var(--image-cropper-checker-size, var(--spacing-4))
+        var(--image-cropper-checker-size, var(--spacing-4));
     box-shadow: var(--image-cropper-shadow, none);
     overflow: hidden;
 
@@ -83,7 +87,7 @@
       box-shadow: 0 0 0 9999px var(--image-cropper-selection-overlay-bg, #00000073),
         inset 0 0 0 var(--image-cropper-selection-inner-border-width, var(--border-width-sm))
           var(--image-cropper-selection-inner-border-color, #ffffffa3),
-        0 0 0 var(--image-cropper-focus-ring-width, var(--border-width-md))
+        0 0 0 var(--image-cropper-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
           var(--image-cropper-focus-ring-color, var(--color-ring));
     }
 
@@ -113,8 +117,8 @@
   .Bk909a_handle {
     z-index: 1;
     box-sizing: border-box;
-    width: var(--image-cropper-handle-size, .75rem);
-    height: var(--image-cropper-handle-size, .75rem);
+    width: var(--image-cropper-handle-size, var(--spacing-3));
+    height: var(--image-cropper-handle-size, var(--spacing-3));
     border: var(--image-cropper-handle-border-width, var(--border-width-sm)) solid
       var(--image-cropper-handle-border-color, #ffffffe0);
     border-radius: var(--image-cropper-handle-radius, var(--radius-xs));

package/dist/components/image-cropper/ImageCropper.d.ts

@@ -1,15 +1,20 @@
-import { ImageCropper } from "@ark-ui/react/image-cropper";
+import { ImageCropper, useImageCropper } from "@ark-ui/react/image-cropper";
 
 //#region src/components/image-cropper/ImageCropper.d.ts
 declare const ImageCropper$1: import("react").ForwardRefExoticComponent<Omit<ImageCropper.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<ImageCropper.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<ImageCropper.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: ImageCropper.ContextProps) => import("react").ReactNode;
   Viewport: import("react").ForwardRefExoticComponent<Omit<ImageCropper.ViewportProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Image: import("react").ForwardRefExoticComponent<Omit<ImageCropper.ImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
   Selection: import("react").ForwardRefExoticComponent<Omit<ImageCropper.SelectionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Grid: import("react").ForwardRefExoticComponent<Omit<ImageCropper.GridProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Handle: import("react").ForwardRefExoticComponent<Omit<ImageCropper.HandleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  CropArea: import("react").ForwardRefExoticComponent<Omit<ImageCropper.SelectionProps & import("react").RefAttributes<HTMLDivElement> & {
+    gridClassName?: string;
+    handleClassName?: string;
+  }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   handles: ImageCropper.HandlePosition[];
 };
 //#endregion
-export { ImageCropper$1 as ImageCropper };
+export { ImageCropper$1 as ImageCropper, useImageCropper };