@moduix/solid 1.0.0

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

@@ -0,0 +1,165 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { HoverCard, useHoverCard, useHoverCardContext } from "@ark-ui/solid/hover-card";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import HoverCard_module from "./HoverCard.module.js";
+function HoverCardRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(HoverCard.Root, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function HoverCardRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(HoverCard.RootProvider, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function HoverCardTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(HoverCard.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "hover-card-trigger",
+        get ["class"] () {
+            return clsx(!local.asChild && HoverCard_module.trigger, local.class);
+        }
+    }, others));
+}
+function HoverCardPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(HoverCard.Positioner, mergeProps({
+                "data-slot": "hover-card-positioner",
+                get ["class"] () {
+                    return clsx(HoverCard_module.positioner, local.class);
+                }
+            }, others));
+        }
+    });
+}
+function HoverCardContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(HoverCard.Content, mergeProps({
+        "data-slot": "hover-card-content",
+        get ["class"] () {
+            return clsx(HoverCard_module.content, local.class);
+        }
+    }, others));
+}
+function HoverCardArrow(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(HoverCard.Arrow, mergeProps({
+        "data-slot": "hover-card-arrow",
+        get ["class"] () {
+            return clsx(HoverCard_module.arrow, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(HoverCardArrowTip, {});
+        }
+    }));
+}
+function HoverCardArrowTip(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(HoverCard.ArrowTip, mergeProps({
+        "data-slot": "hover-card-arrow-tip",
+        get ["class"] () {
+            return clsx(HoverCard_module.arrowTip, local.class);
+        }
+    }, others));
+}
+function HoverCardBody(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "hover-card-body",
+        get ["class"] () {
+            return clsx(HoverCard_module.body, local.class);
+        }
+    }, others));
+}
+const HoverCard_HoverCard = Object.assign(HoverCardRoot, {
+    Root: HoverCardRoot,
+    RootProvider: HoverCardRootProvider,
+    Trigger: HoverCardTrigger,
+    Positioner: HoverCardPositioner,
+    Content: HoverCardContent,
+    Arrow: HoverCardArrow,
+    ArrowTip: HoverCardArrowTip,
+    Body: HoverCardBody,
+    Context: HoverCard.Context
+});
+export { HoverCard_HoverCard as HoverCard, useHoverCard, useHoverCardContext };

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

@@ -0,0 +1,90 @@
+import { ark } from "@ark-ui/solid/factory";
+import { HoverCard, useHoverCard, useHoverCardContext } from "@ark-ui/solid/hover-card";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.jsx";
+import HoverCard_module from "./HoverCard.module.jsx";
+function HoverCardRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <HoverCard.Root lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </HoverCard.Root>
+    </OverlayPortalProvider>;
+}
+function HoverCardRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
+      <HoverCard.RootProvider lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+        {local.children}
+      </HoverCard.RootProvider>
+    </OverlayPortalProvider>;
+}
+function HoverCardTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <HoverCard.Trigger asChild={local.asChild} data-slot="hover-card-trigger" class={clsx(!local.asChild && HoverCard_module.trigger, local.class)} {...others}/>;
+}
+function HoverCardPositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <OverlayPortal>
+      <HoverCard.Positioner data-slot="hover-card-positioner" class={clsx(HoverCard_module.positioner, local.class)} {...others}/>
+    </OverlayPortal>;
+}
+function HoverCardContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <HoverCard.Content data-slot="hover-card-content" class={clsx(HoverCard_module.content, local.class)} {...others}/>;
+}
+function HoverCardArrow(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <HoverCard.Arrow data-slot="hover-card-arrow" class={clsx(HoverCard_module.arrow, local.class)} {...others}>
+      {resolvedChildren() ?? <HoverCardArrowTip/>}
+    </HoverCard.Arrow>;
+}
+function HoverCardArrowTip(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <HoverCard.ArrowTip data-slot="hover-card-arrow-tip" class={clsx(HoverCard_module.arrowTip, local.class)} {...others}/>;
+}
+function HoverCardBody(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.div asChild={local.asChild} data-slot="hover-card-body" class={clsx(HoverCard_module.body, local.class)} {...others}/>;
+}
+const HoverCard_HoverCard = Object.assign(HoverCardRoot, {
+    Root: HoverCardRoot,
+    RootProvider: HoverCardRootProvider,
+    Trigger: HoverCardTrigger,
+    Positioner: HoverCardPositioner,
+    Content: HoverCardContent,
+    Arrow: HoverCardArrow,
+    ArrowTip: HoverCardArrowTip,
+    Body: HoverCardBody,
+    Context: HoverCard.Context
+});
+export { HoverCard_HoverCard as HoverCard, useHoverCard, useHoverCardContext };

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

@@ -0,0 +1,14 @@
+import "./HoverCard_module.css";
+const HoverCard_module = {
+    trigger: "trigger-lDTCiV",
+    positioner: "positioner-Knug22",
+    content: "content-Su6EOr",
+    body: "body-fS0OHU",
+    "hover-card-enter": "hover-card-enter-Yx8tti",
+    hoverCardEnter: "hover-card-enter-Yx8tti",
+    "hover-card-exit": "hover-card-exit-l3ykob",
+    hoverCardExit: "hover-card-exit-l3ykob",
+    arrow: "arrow-iWKZXG",
+    arrowTip: "arrowTip-Sgqdh6"
+};
+export default HoverCard_module;

package/dist/components/hover-card/HoverCard.module.jsx

@@ -0,0 +1,14 @@
+import "./HoverCard_module.css";
+const HoverCard_module = {
+    trigger: "trigger-lDTCiV",
+    positioner: "positioner-Knug22",
+    content: "content-Su6EOr",
+    body: "body-fS0OHU",
+    "hover-card-enter": "hover-card-enter-Yx8tti",
+    hoverCardEnter: "hover-card-enter-Yx8tti",
+    "hover-card-exit": "hover-card-exit-l3ykob",
+    hoverCardExit: "hover-card-exit-l3ykob",
+    arrow: "arrow-iWKZXG",
+    arrowTip: "arrowTip-Sgqdh6"
+};
+export default HoverCard_module;

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

@@ -0,0 +1,143 @@
+@layer moduix.components {
+  .trigger-lDTCiV {
+    --_hover-card-trigger-current-color: var(--moduix-hover-card-trigger-color, var(--moduix-color-primary));
+    align-items: center;
+    gap: var(--moduix-hover-card-trigger-gap, var(--moduix-spacing-1));
+    color: var(--_hover-card-trigger-current-color);
+    font: inherit;
+    text-decoration-line: underline;
+    text-decoration-thickness: var(--moduix-hover-card-trigger-decoration-thickness, 1px);
+    -webkit-text-decoration-color: var(--moduix-hover-card-trigger-decoration-color, color-mix(in oklab, var(--_hover-card-trigger-current-color), transparent 40%));
+    text-decoration-color: var(--moduix-hover-card-trigger-decoration-color, color-mix(in oklab, var(--_hover-card-trigger-current-color), transparent 40%));
+    text-underline-offset: var(--moduix-hover-card-trigger-underline-offset, 2px);
+    cursor: pointer;
+    transition: color var(--moduix-hover-card-transition, var(--moduix-duration-fast)),
+      text-decoration-color var(--moduix-hover-card-transition, var(--moduix-duration-fast));
+    outline: 0;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    .trigger-lDTCiV:hover {
+      -webkit-text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-hover, var(--_hover-card-trigger-current-color));
+      text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-hover, var(--_hover-card-trigger-current-color));
+    }
+  }
+
+  .trigger-lDTCiV[data-state="open"] {
+    -webkit-text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-open, var(--_hover-card-trigger-current-color));
+    text-decoration-color: var(--moduix-hover-card-trigger-decoration-color-open, var(--_hover-card-trigger-current-color));
+  }
+
+  .trigger-lDTCiV:focus-visible {
+    border-radius: var(--moduix-hover-card-trigger-focus-radius, var(--moduix-radius-xs));
+    outline: var(--moduix-hover-card-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-hover-card-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-hover-card-trigger-focus-offset, var(--moduix-focus-ring-offset));
+    text-decoration-line: none;
+  }
+
+  .trigger-lDTCiV:is([data-disabled], [disabled]) {
+    pointer-events: none;
+    opacity: var(--moduix-hover-card-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .positioner-Knug22 {
+    z-index: var(--z-index, var(--moduix-z-popup));
+    max-width: var(--available-width);
+    outline: 0;
+  }
+
+  .content-Su6EOr {
+    z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0));
+    box-sizing: border-box;
+    width: var(--moduix-hover-card-width, auto);
+    height: var(--moduix-hover-card-height, auto);
+    min-width: min(var(--moduix-hover-card-min-width, 14rem), var(--available-width));
+    max-width: min(var(--moduix-hover-card-max-width, 24rem), var(--available-width));
+    max-height: min(var(--moduix-hover-card-max-height, 24rem), var(--available-height, 100dvh));
+    overflow-wrap: anywhere;
+    padding: var(--moduix-hover-card-padding-y, var(--moduix-spacing-2))
+      var(--moduix-hover-card-padding-x, var(--moduix-spacing-2));
+    border: var(--moduix-hover-card-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-hover-card-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-hover-card-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-hover-card-bg, var(--moduix-color-popover));
+    color: var(--moduix-hover-card-color, var(--moduix-color-popover-foreground));
+    box-shadow: var(--moduix-hover-card-shadow, var(--moduix-shadow-lg));
+    transform-origin: var(--transform-origin);
+    outline: 0;
+    position: relative;
+    overflow: visible;
+  }
+
+  .content-Su6EOr:has( > .body-fS0OHU) {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .content-Su6EOr:has( > .body-fS0OHU) > .body-fS0OHU {
+    min-block-size: 0;
+    overflow: auto;
+  }
+
+  .content-Su6EOr[data-state="open"] {
+    animation: hover-card-enter-Yx8tti
+        var(--moduix-hover-card-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast))
+            var(--moduix-popup-motion-easing, ease))
+        both;
+  }
+
+  .content-Su6EOr[data-state="closed"] {
+    animation: hover-card-exit-l3ykob
+        var(--moduix-hover-card-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast))
+            var(--moduix-popup-motion-easing, ease))
+        both;
+  }
+
+  .arrow-iWKZXG {
+    --arrow-size: var(--moduix-hover-card-arrow-size, var(--moduix-spacing-2-5));
+    --arrow-background: var(--moduix-hover-card-bg, var(--moduix-color-popover));
+    --arrow-shadow-color: var(--moduix-hover-card-arrow-stroke-color, var(--moduix-hover-card-border-color, var(--moduix-color-border)));
+  }
+
+  .body-fS0OHU {
+    min-block-size: 0;
+  }
+
+  .arrowTip-Sgqdh6 {
+    border-top: var(--moduix-hover-card-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-hover-card-arrow-stroke-color, var(--moduix-hover-card-border-color, var(--moduix-color-border)));
+    border-left: var(--moduix-hover-card-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-hover-card-arrow-stroke-color, var(--moduix-hover-card-border-color, var(--moduix-color-border)));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-lDTCiV {
+      transition: none;
+    }
+
+    .content-Su6EOr {
+      animation: none;
+    }
+  }
+
+  @keyframes hover-card-enter-Yx8tti {
+    from {
+      opacity: var(--moduix-hover-card-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-hover-card-content-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-hover-card-content-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      scale: var(--moduix-hover-card-content-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup)));
+    }
+  }
+
+  @keyframes hover-card-exit-l3ykob {
+    to {
+      opacity: var(--moduix-hover-card-content-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-hover-card-content-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-hover-card-content-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      scale: var(--moduix-hover-card-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)));
+    }
+  }
+}
+

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

@@ -0,0 +1,2 @@
+export { HoverCard, useHoverCard, useHoverCardContext } from './HoverCard.js';
+export type { HoverCardRootProps, HoverCardRootProviderProps } from './HoverCard.js';

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

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

package/dist/components/hover-card/index.jsx

@@ -0,0 +1 @@
+export { HoverCard, useHoverCard, useHoverCardContext } from "./HoverCard.jsx";

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

@@ -0,0 +1,14 @@
+import type { UnpicImageProps, UnpicSourceProps } from '@unpic/core';
+import type { JSX } from 'solid-js';
+type ImageProps = Omit<UnpicImageProps<JSX.ImgHTMLAttributes<HTMLImageElement>>, 'fetchpriority'> & {
+    fetchpriority?: JSX.ImgHTMLAttributes<HTMLImageElement>['fetchpriority'];
+    style?: JSX.ImgHTMLAttributes<HTMLImageElement>['style'];
+};
+type ImageSourceProps = UnpicSourceProps & Omit<JSX.SourceHTMLAttributes<HTMLSourceElement>, 'height' | 'media' | 'sizes' | 'src' | 'srcset' | 'type' | 'width'>;
+declare function ImageRoot(props: ImageProps): JSX.Element;
+declare function ImageSource(props: ImageSourceProps): JSX.Element;
+declare const Image: typeof ImageRoot & {
+    Root: typeof ImageRoot;
+    Source: typeof ImageSource;
+};
+export { Image };

package/dist/components/image/Image.js

@@ -0,0 +1,54 @@
+import { mergeProps, spread, template } from "solid-js/web";
+import { transformProps, transformSourceProps } from "@unpic/core";
+import { clsx } from "clsx";
+import { createMemo, splitProps } from "solid-js";
+import Image_module from "./Image.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<img>"), _tmpl$2 = /*#__PURE__*/ template("<source>");
+function ImageRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'fetchpriority'
+    ]);
+    const imageProps = createMemo(()=>{
+        const transformed = transformProps({
+            ...others
+        });
+        return void 0 === local.fetchpriority ? transformed : {
+            ...transformed,
+            fetchpriority: local.fetchpriority
+        };
+    });
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(imageProps, {
+            "data-slot": "image-root",
+            get ["class"] () {
+                return clsx(Image_module.root, local.class);
+            }
+        }), false, false);
+        return _el$;
+    })();
+}
+function ImageSource(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const sourceProps = createMemo(()=>transformSourceProps({
+            ...others
+        }));
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        spread(_el$2, mergeProps(sourceProps, {
+            "data-slot": "image-source",
+            get ["class"] () {
+                return local.class;
+            }
+        }), false, false);
+        return _el$2;
+    })();
+}
+const Image = Object.assign(ImageRoot, {
+    Root: ImageRoot,
+    Source: ImageSource
+});
+export { Image };

package/dist/components/image/Image.jsx

@@ -0,0 +1,34 @@
+import { transformProps, transformSourceProps } from "@unpic/core";
+import { clsx } from "clsx";
+import { createMemo, splitProps } from "solid-js";
+import Image_module from "./Image.module.jsx";
+function ImageRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'fetchpriority'
+    ]);
+    const imageProps = createMemo(()=>{
+        const transformed = transformProps({
+            ...others
+        });
+        return void 0 === local.fetchpriority ? transformed : {
+            ...transformed,
+            fetchpriority: local.fetchpriority
+        };
+    });
+    return <img {...imageProps()} data-slot="image-root" class={clsx(Image_module.root, local.class)}/>;
+}
+function ImageSource(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const sourceProps = createMemo(()=>transformSourceProps({
+            ...others
+        }));
+    return <source {...sourceProps()} data-slot="image-source" class={local.class}/>;
+}
+const Image = Object.assign(ImageRoot, {
+    Root: ImageRoot,
+    Source: ImageSource
+});
+export { Image };

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

@@ -0,0 +1,5 @@
+import "./Image_module.css";
+const Image_module = {
+    root: "root-TcvZxj"
+};
+export default Image_module;

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

@@ -0,0 +1,5 @@
+import "./Image_module.css";
+const Image_module = {
+    root: "root-TcvZxj"
+};
+export default Image_module;

package/dist/components/image/Image_module.css

@@ -0,0 +1,8 @@
+@layer moduix.components {
+  .root-TcvZxj {
+    box-sizing: border-box;
+    border-radius: var(--moduix-image-radius, var(--moduix-radius-md));
+    display: block;
+  }
+}
+

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

@@ -0,0 +1 @@
+export { Image } from './Image.js';

package/dist/components/image/index.js

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

package/dist/components/image/index.jsx

@@ -0,0 +1 @@
+export { Image } from "./Image.jsx";

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

@@ -0,0 +1,27 @@
+import { ImageCropper as ImageCropperPrimitive, useImageCropper, useImageCropperContext } from '@ark-ui/solid/image-cropper';
+import type { ComponentProps } from 'solid-js';
+declare function ImageCropperRoot(props: ComponentProps<typeof ImageCropperPrimitive.Root>): import("solid-js").JSX.Element;
+declare function ImageCropperRootProvider(props: ComponentProps<typeof ImageCropperPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function ImageCropperViewport(props: ComponentProps<typeof ImageCropperPrimitive.Viewport>): import("solid-js").JSX.Element;
+declare function ImageCropperImage(props: ComponentProps<typeof ImageCropperPrimitive.Image>): import("solid-js").JSX.Element;
+declare function ImageCropperSelection(props: ComponentProps<typeof ImageCropperPrimitive.Selection>): import("solid-js").JSX.Element;
+declare function ImageCropperGrid(props: ComponentProps<typeof ImageCropperPrimitive.Grid>): import("solid-js").JSX.Element;
+declare function ImageCropperHandle(props: ComponentProps<typeof ImageCropperPrimitive.Handle>): import("solid-js").JSX.Element;
+type ImageCropperCropAreaProps = Omit<ComponentProps<typeof ImageCropperPrimitive.Selection>, 'asChild' | 'children'> & {
+    gridClassName?: string;
+    handleClassName?: string;
+};
+declare function ImageCropperCropArea(props: ImageCropperCropAreaProps): import("solid-js").JSX.Element;
+declare const ImageCropper: typeof ImageCropperRoot & {
+    Root: typeof ImageCropperRoot;
+    RootProvider: typeof ImageCropperRootProvider;
+    Context: (props: ImageCropperPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Viewport: typeof ImageCropperViewport;
+    Image: typeof ImageCropperImage;
+    Selection: typeof ImageCropperSelection;
+    Grid: typeof ImageCropperGrid;
+    Handle: typeof ImageCropperHandle;
+    CropArea: typeof ImageCropperCropArea;
+    handles: import("@ark-ui/solid").ImageCropperHandlePosition[];
+};
+export { ImageCropper, useImageCropper, useImageCropperContext };