@moduix/react 1.1.1 → 2.0.0

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

@@ -67,11 +67,15 @@
     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;
     }
   }
 
@@ -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.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 };

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

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import ImageCropper_module_default from "./ImageCropper.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { ImageCropper } from "@ark-ui/react/image-cropper";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ImageCropper, useImageCropper } from "@ark-ui/react/image-cropper";
 //#region src/components/image-cropper/ImageCropper.tsx
 const ImageCropperRoot = forwardRef(function ImageCropperRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ImageCropper.Root, {
@@ -61,15 +61,37 @@ const ImageCropperHandle = forwardRef(function ImageCropperHandle({ className, .
 		...props
 	});
 });
+const ImageCropperCropArea = forwardRef(function ImageCropperCropArea({ gridClassName, handleClassName, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(ImageCropperSelection, {
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ImageCropperGrid, {
+				axis: "horizontal",
+				className: gridClassName
+			}),
+			/* @__PURE__ */ jsx(ImageCropperGrid, {
+				axis: "vertical",
+				className: gridClassName
+			}),
+			ImageCropper.handles.map((position) => /* @__PURE__ */ jsx(ImageCropperHandle, {
+				position,
+				className: handleClassName
+			}, position))
+		]
+	});
+});
 const ImageCropper$1 = Object.assign(ImageCropperRoot, {
 	Root: ImageCropperRoot,
 	RootProvider: ImageCropperRootProvider,
+	Context: ImageCropper.Context,
 	Viewport: ImageCropperViewport,
 	Image: ImageCropperImage,
 	Selection: ImageCropperSelection,
 	Grid: ImageCropperGrid,
 	Handle: ImageCropperHandle,
+	CropArea: ImageCropperCropArea,
 	handles: ImageCropper.handles
 });
 //#endregion
-export { ImageCropper$1 as ImageCropper };
+export { ImageCropper$1 as ImageCropper, useImageCropper };

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

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

package/dist/components/input/Input.js

@@ -1,8 +1,8 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Input_module_default from "./Input.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { Field } from "@ark-ui/react/field";
 //#region src/components/input/Input.tsx
 const InputRoot = forwardRef(function InputRoot({ className, size = "md", htmlSize, ...props }, ref) {

package/dist/components/input-group/InputGroup.d.ts

@@ -16,8 +16,11 @@ declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<import(
   Addon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
   Text: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
   Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    loading?: boolean;
     variant?: "default" | "outline" | "secondary" | "destructive" | "destructive-outline" | "ghost" | "link";
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg";
+    'data-scope'?: string;
+    'data-part'?: string;
     'data-slot'?: string;
   } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };

package/dist/components/input-group/InputGroup.js

@@ -2,10 +2,10 @@ import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { Button } from "../button/Button.js";
 import { Input } from "../input/Input.js";
 import InputGroup_module_default from "./InputGroup.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { createContext, forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/input-group/InputGroup.tsx
 const InputGroupSizeContext = createContext("md");
 const InputGroupRoot = forwardRef(function InputGroupRoot({ children, className, size = "md", ...props }, ref) {

package/dist/components/kbd/Kbd.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Kbd_module_default from "./Kbd.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/kbd/Kbd.tsx
 const KbdRoot = forwardRef(function KbdRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.kbd, {

package/dist/components/lightbox/Lightbox.css

@@ -52,11 +52,13 @@
     position: relative;
 
     &[data-state="open"] {
-      animation: BCq4HG_lightbox-content-in var(--lightbox-transition, .22s ease);
+      animation: BCq4HG_lightbox-content-in
+        var(--lightbox-transition, var(--popup-motion-duration, .22s) var(--popup-motion-easing, ease));
     }
 
     &[data-state="closed"] {
-      animation: BCq4HG_lightbox-content-out var(--lightbox-transition, .22s ease);
+      animation: BCq4HG_lightbox-content-out
+        var(--lightbox-transition, var(--popup-motion-duration, .22s) var(--popup-motion-easing, ease));
     }
   }
 
@@ -224,19 +226,19 @@
 
   @keyframes BCq4HG_lightbox-content-in {
     from {
-      opacity: var(--lightbox-content-starting-opacity, 0);
-      translate: var(--lightbox-content-starting-translate-x, 0)
-        var(--lightbox-content-starting-translate-y, 0);
-      scale: var(--lightbox-content-starting-scale, .82);
+      opacity: var(--lightbox-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--lightbox-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--lightbox-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
+      scale: var(--lightbox-content-starting-scale, var(--popup-motion-starting-scale, .82));
     }
   }
 
   @keyframes BCq4HG_lightbox-content-out {
     to {
-      opacity: var(--lightbox-content-ending-opacity, 0);
-      translate: var(--lightbox-content-ending-translate-x, 0)
-        var(--lightbox-content-ending-translate-y, 0);
-      scale: var(--lightbox-content-ending-scale, .82);
+      opacity: var(--lightbox-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--lightbox-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--lightbox-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
+      scale: var(--lightbox-content-ending-scale, var(--popup-motion-ending-scale, .82));
     }
   }
 }

package/dist/components/lightbox/Lightbox.d.ts

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps, RefObject } from "react";
-import { Dialog } from "@ark-ui/react/dialog";
+import { Dialog, useDialog as useDialog$1, useDialogContext as useDialogContext$1 } from "@ark-ui/react/dialog";
 
 //#region src/components/lightbox/Lightbox.d.ts
 type LightboxImageSelectDetails = {
@@ -66,6 +66,8 @@ declare const Lightbox: typeof LightboxRoot & {
   Image: import("react").ForwardRefExoticComponent<Omit<LightboxImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
   Gallery: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Bind: typeof LightboxBind;
+  useLightbox: (props?: import("@ark-ui/react/dialog").UseDialogProps) => import("@ark-ui/react/dialog").UseDialogReturn;
+  useLightboxContext: () => import("@ark-ui/react/dialog").UseDialogContext;
 };
 //#endregion
-export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails };
+export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails, useDialog$1 as useLightbox, useDialogContext$1 as useLightboxContext };

package/dist/components/lightbox/Lightbox.js

@@ -2,10 +2,10 @@ import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Lightbox_module_default from "./Lightbox.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef, useEffect } from "react";
-import { Dialog, useDialogContext } from "@ark-ui/react/dialog";
+import { jsx } from "react/jsx-runtime";
+import { Dialog, useDialog as useDialog$1, useDialogContext as useDialogContext$1 } from "@ark-ui/react/dialog";
 //#region src/components/lightbox/Lightbox.tsx
 const DEFAULT_CLOSE_LABEL = "Close image";
 const preloadedImageSources = /* @__PURE__ */ new Set();
@@ -100,7 +100,7 @@ const LightboxCloseTrigger = forwardRef(function LightboxCloseTrigger({ classNam
 	});
 });
 const LightboxCloseIcon = forwardRef(function LightboxCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_LABEL, ...props }, ref) {
-	const dialog = useDialogContext();
+	const dialog = useDialogContext$1();
 	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
 		asChild: true,
 		...props,
@@ -115,7 +115,7 @@ const LightboxCloseIcon = forwardRef(function LightboxCloseIcon({ className, chi
 	});
 });
 const LightboxImage = forwardRef(function LightboxImage({ className, closeOnClick = false, onClick, ...props }, ref) {
-	const dialog = useDialogContext();
+	const dialog = useDialogContext$1();
 	const handleClick = (event) => {
 		onClick?.(event);
 		if (closeOnClick && !event.defaultPrevented) dialog.setOpen(false);
@@ -159,7 +159,7 @@ function LightboxFooter({ className, ...props }) {
 	});
 }
 function LightboxBind({ onImageSelect, selector = "img", rootRef, rootSelector }) {
-	const { setOpen } = useDialogContext();
+	const { setOpen } = useDialogContext$1();
 	useEffect(() => {
 		const rootNode = rootRef?.current ?? (rootSelector ? document.querySelector(rootSelector) : null);
 		if (!rootNode) return;
@@ -213,7 +213,9 @@ const Lightbox = Object.assign(LightboxRoot, {
 	Footer: LightboxFooter,
 	Image: LightboxImage,
 	Gallery: LightboxGallery,
-	Bind: LightboxBind
+	Bind: LightboxBind,
+	useLightbox: useDialog$1,
+	useLightboxContext: useDialogContext$1
 });
 //#endregion
-export { Lightbox, LightboxBind, LightboxGallery, LightboxImage };
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useDialog$1 as useLightbox, useDialogContext$1 as useLightboxContext };

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

@@ -1,2 +1,2 @@
-import { Lightbox, LightboxBind, LightboxBindProps, LightboxGallery, LightboxImage, LightboxImageSelectDetails } from "./Lightbox.js";
-export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails };
+import { Lightbox, LightboxBind, LightboxBindProps, LightboxGallery, LightboxImage, LightboxImageSelectDetails, useLightbox as useDialog, useLightboxContext as useDialogContext } from "./Lightbox.js";
+export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails, useDialog as useLightbox, useDialogContext as useLightboxContext };

package/dist/components/list/List.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import List_module_default from "./List.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/list/List.tsx
 const ListRoot = forwardRef(function ListRoot({ as, asChild, className, gap = "sm", marker, role, size = "md", tone = "default", ...props }, ref) {
 	const markerValue = marker ?? "auto";

package/dist/components/listbox/Listbox.css

@@ -50,7 +50,6 @@
     }
 
     &:focus-visible {
-      border-color: var(--listbox-input-focus-ring-color, var(--listbox-focus-ring-color, var(--color-ring)));
       outline-color: var(--listbox-input-focus-ring-color, var(--listbox-focus-ring-color, var(--color-ring)));
     }
 
@@ -60,6 +59,66 @@
     }
   }
 
+  .SHhhXW_filter {
+    box-sizing: border-box;
+    width: 100%;
+    position: relative;
+
+    &:has( + .SHhhXW_content) .SHhhXW_input {
+      border-bottom: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .SHhhXW_filter + .SHhhXW_content {
+    margin-top: calc(-1 * var(--listbox-root-gap, var(--spacing-3)));
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .SHhhXW_filterIcon {
+    z-index: 1;
+    top: 50%;
+    width: var(--listbox-filter-icon-size, 1rem);
+    height: var(--listbox-filter-icon-size, 1rem);
+    color: var(--listbox-filter-icon-color, var(--color-muted-foreground));
+    pointer-events: none;
+    position: absolute;
+    inset-inline-start: var(--listbox-filter-padding-x, var(--spacing-3));
+    transform: translateY(-50%);
+  }
+
+  .SHhhXW_filter .SHhhXW_input {
+    min-height: var(--listbox-filter-height, var(--listbox-input-height, var(--size-lg)));
+    background-color: var(--listbox-bg, var(--color-background));
+    padding-inline-start: calc(var(--listbox-filter-padding-x, var(--spacing-3)) + var(--listbox-filter-icon-size, 1rem) +
+        var(--listbox-filter-input-padding-x, var(--spacing-2)));
+    padding-inline-end: calc(var(--listbox-filter-padding-x, var(--spacing-3)) +
+        var(--listbox-filter-action-size, 1.5rem) +
+        var(--listbox-filter-input-padding-x, var(--spacing-2)));
+
+    &:focus-visible {
+      outline-color: #0000;
+    }
+  }
+
+  .SHhhXW_clearTrigger {
+    z-index: 1;
+    top: 50%;
+    --close-button-size: var(--listbox-filter-action-size, 1.5rem);
+    --close-button-radius: var(--listbox-filter-action-radius, var(--radius-sm));
+    --close-button-bg: var(--listbox-filter-action-bg, transparent);
+    --close-button-bg-hover: var(--listbox-filter-action-bg-hover, var(--color-muted));
+    --close-button-color: var(--listbox-filter-icon-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--listbox-filter-action-color-hover, var(--color-foreground));
+    --close-button-icon-size: var(--listbox-filter-icon-size, 1rem);
+    --close-button-transition: var(--listbox-transition, var(--transition-default));
+    position: absolute;
+    inset-inline-end: var(--listbox-filter-padding-x, var(--spacing-3));
+    transform: translateY(-50%);
+  }
+
   .SHhhXW_content {
     box-sizing: border-box;
     min-height: 0;

package/dist/components/listbox/Listbox.d.ts

@@ -1,7 +1,12 @@
 import { ComponentProps } from "react";
-import { Listbox } from "@ark-ui/react/listbox";
+import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "@ark-ui/react/listbox";
 
 //#region src/components/listbox/Listbox.d.ts
+declare function ListboxFilter({
+  className,
+  children,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
 declare function ListboxItemTextContent({
   className,
   ...props
@@ -19,6 +24,8 @@ declare const Listbox$1: Listbox.RootComponent & {
   RootProvider: Listbox.RootProviderComponent;
   Label: import("react").ForwardRefExoticComponent<Omit<Listbox.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Input: import("react").ForwardRefExoticComponent<Omit<Listbox.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Filter: typeof ListboxFilter;
+  ClearTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Content: import("react").ForwardRefExoticComponent<Omit<Listbox.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Empty: import("react").ForwardRefExoticComponent<Omit<Listbox.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemGroup: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -27,9 +34,14 @@ declare const Listbox$1: Listbox.RootComponent & {
   ItemText: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<Listbox.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Context: <T extends unknown>(props: Listbox.ContextProps<T>) => import("react").ReactNode;
+  ItemContext: (props: Listbox.ItemContextProps) => import("react").ReactNode;
   ItemTextContent: typeof ListboxItemTextContent;
   ItemTextIcon: typeof ListboxItemTextIcon;
   ItemTextLabel: typeof ListboxItemTextLabel;
+  useListbox: <T extends unknown>(props: import("@ark-ui/react/listbox").UseListboxProps<T>) => import("@ark-ui/react/listbox").UseListboxReturn<T>;
+  useListboxContext: () => import("@ark-ui/react/listbox").UseListboxContext<any>;
+  useListboxItemContext: () => import("@ark-ui/react/listbox").UseListboxItemContext;
 };
 //#endregion
-export { Listbox$1 as Listbox };
+export { Listbox$1 as Listbox, useListbox, useListboxContext, useListboxItemContext };

package/dist/components/listbox/Listbox.js

@@ -1,10 +1,12 @@
-import { CheckIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, SearchIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import Listbox_module_default from "./Listbox.module.js";
-import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Listbox } from "@ark-ui/react/listbox";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "@ark-ui/react/listbox";
 //#region src/components/listbox/Listbox.tsx
 const ListboxRoot = forwardRef(function ListboxRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Listbox.Root, {
@@ -38,6 +40,33 @@ const ListboxInput = forwardRef(function ListboxInput({ className, ...props }, r
 		...props
 	});
 });
+function ListboxFilter({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "listbox-filter",
+		className: clsx(Listbox_module_default.filter, normalizeClassName(className)),
+		...props,
+		children: [/* @__PURE__ */ jsx(SearchIcon, {
+			"data-slot": "listbox-filter-icon",
+			className: Listbox_module_default.filterIcon
+		}), children]
+	});
+}
+const ListboxClearTrigger = forwardRef(function ListboxClearTrigger({ "aria-label": ariaLabel = "Clear search", className, children, type = "button", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.button, {
+		ref,
+		asChild: true,
+		"data-slot": "listbox-clear-trigger",
+		type,
+		"aria-label": ariaLabel,
+		className: clsx(Listbox_module_default.clearTrigger, normalizeClassName(className)),
+		...props,
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			"aria-label": ariaLabel,
+			type,
+			children
+		})
+	});
+});
 const ListboxContent = forwardRef(function ListboxContent({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Listbox.Content, {
 		ref,
@@ -129,6 +158,8 @@ const Listbox$1 = Object.assign(ListboxRoot, {
 	RootProvider: ListboxRootProvider,
 	Label: ListboxLabel,
 	Input: ListboxInput,
+	Filter: ListboxFilter,
+	ClearTrigger: ListboxClearTrigger,
 	Content: ListboxContent,
 	Empty: ListboxEmpty,
 	ItemGroup: ListboxItemGroup,
@@ -137,9 +168,14 @@ const Listbox$1 = Object.assign(ListboxRoot, {
 	ItemText: ListboxItemText,
 	ItemIndicator: ListboxItemIndicator,
 	ValueText: ListboxValueText,
+	Context: Listbox.Context,
+	ItemContext: Listbox.ItemContext,
 	ItemTextContent: ListboxItemTextContent,
 	ItemTextIcon: ListboxItemTextIcon,
-	ItemTextLabel: ListboxItemTextLabel
+	ItemTextLabel: ListboxItemTextLabel,
+	useListbox,
+	useListboxContext,
+	useListboxItemContext
 });
 //#endregion
-export { Listbox$1 as Listbox };
+export { Listbox$1 as Listbox, useListbox, useListboxContext, useListboxItemContext };

package/dist/components/listbox/Listbox.module.js

@@ -1,8 +1,11 @@
 import './Listbox.css';
 //#region src/components/listbox/Listbox.module.css
 var Listbox_module_default = {
+	"clearTrigger": "SHhhXW_clearTrigger",
 	"content": "SHhhXW_content",
 	"empty": "SHhhXW_empty",
+	"filter": "SHhhXW_filter",
+	"filterIcon": "SHhhXW_filterIcon",
 	"input": "SHhhXW_input",
 	"item": "SHhhXW_item",
 	"itemGroup": "SHhhXW_itemGroup",

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

@@ -1,2 +1,2 @@
-import { Listbox } from "./Listbox.js";
-export { Listbox };
+import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "./Listbox.js";
+export { Listbox, useListbox, useListboxContext, useListboxItemContext };