4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1166,'use client'; import { ImageCropper as ImageCropperPrimitive, useImageCropper, useImageCropperContext, } from '@ark-ui/react/image-cropper'; import { clsx } from 'clsx'; import type { ComponentProps, ComponentRef } from 'react'; import { forwardRef } from 'react'; import styles from './ImageCropper.module.css'; const ImageCropperRoot = forwardRef< ComponentRef, ComponentProps >(function ImageCropperRoot({ className, ...props }, ref) { return ( ); }); const ImageCropperRootProvider = forwardRef< ComponentRef, ComponentProps >(function ImageCropperRootProvider({ className, ...props }, ref) { return ( ); }); const ImageCropperViewport = forwardRef< ComponentRef, ComponentProps >(function ImageCropperViewport({ className, ...props }, ref) { return ( ); }); const ImageCropperImage = forwardRef< ComponentRef, ComponentProps >(function ImageCropperImage({ className, ...props }, ref) { return ( ); }); const ImageCropperSelection = forwardRef< ComponentRef, ComponentProps >(function ImageCropperSelection({ className, ...props }, ref) { return ( ); }); const ImageCropperGrid = forwardRef< ComponentRef, ComponentProps >(function ImageCropperGrid({ className, ...props }, ref) { return ( ); }); const ImageCropperHandle = forwardRef< ComponentRef, ComponentProps >(function ImageCropperHandle({ className, ...props }, ref) { return ( ); }); const ImageCropperCropArea = forwardRef< ComponentRef, Omit, 'asChild' | 'children'> & { gridClassName?: string; handleClassName?: string; } >(function ImageCropperCropArea({ gridClassName, handleClassName, ...props }, ref) { const { asChild: _asChild, children: _children, ...selectionProps } = props as ComponentProps; return ( {ImageCropperPrimitive.handles.map((position) => ( ))} ); }); const ImageCropper = Object.assign(ImageCropperRoot, { Root: ImageCropperRoot, RootProvider: ImageCropperRootProvider, Context: ImageCropperPrimitive.Context, Viewport: ImageCropperViewport, Image: ImageCropperImage, Selection: ImageCropperSelection, Grid: ImageCropperGrid, Handle: ImageCropperHandle, CropArea: ImageCropperCropArea, handles: ImageCropperPrimitive.handles, }); export { ImageCropper, useImageCropper, useImageCropperContext };52:T1c79,@layer moduix.components { .root { --moduix-image-cropper-viewport-height: min( var(--moduix-image-cropper-viewport-min-height, 20rem), 62.5vw ); box-sizing: border-box; display: grid; width: var(--moduix-image-cropper-width, 32rem); max-width: var(--moduix-image-cropper-max-width, 100%); gap: var(--moduix-image-cropper-gap, var(--moduix-spacing-3)); color: var(--moduix-image-cropper-color, var(--moduix-color-foreground)); &[data-dragging], &[data-panning] { cursor: grabbing; } } .viewport { box-sizing: border-box; width: 100%; height: var(--moduix-image-cropper-viewport-height); overflow: hidden; border: var(--moduix-image-cropper-border-width, var(--moduix-border-width-sm)) solid var(--moduix-image-cropper-border-color, var(--moduix-color-border)); border-radius: var(--moduix-image-cropper-radius, var(--moduix-radius-lg)); background: linear-gradient( 45deg, var( --moduix-image-cropper-checker-color, color-mix(in oklab, var(--moduix-color-muted) 72%, transparent) ) 25%, transparent 25% ) 0 0 / var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)), linear-gradient( 45deg, transparent 75%, var( --moduix-image-cropper-checker-color, color-mix(in oklab, var(--moduix-color-muted) 72%, transparent) ) 75% ) 0 0 / var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)), linear-gradient( 45deg, transparent 75%, var( --moduix-image-cropper-checker-color, color-mix(in oklab, var(--moduix-color-muted) 72%, transparent) ) 75% ) calc(var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) / -2) calc(var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) / -2) / var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)), linear-gradient( 45deg, var( --moduix-image-cropper-checker-color, color-mix(in oklab, var(--moduix-color-muted) 72%, transparent) ) 25%, var(--moduix-image-cropper-viewport-bg, var(--moduix-color-background)) 25% ) calc(var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) / -2) calc(var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) / -2) / var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)) var(--moduix-image-cropper-checker-size, var(--moduix-spacing-4)); box-shadow: var(--moduix-image-cropper-shadow, none); &[data-disabled] { cursor: grab; } } .image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: center; backface-visibility: hidden; } .selection { box-sizing: border-box; border: var(--moduix-image-cropper-selection-border-width, var(--moduix-border-width-md)) solid var(--moduix-image-cropper-selection-border-color, var(--moduix-color-primary)); border-radius: var(--moduix-image-cropper-selection-radius, var(--moduix-radius-md)); box-shadow: 0 0 0 9999px var(--moduix-image-cropper-selection-overlay-bg, rgb(0 0 0 / 45%)), inset 0 0 0 var(--moduix-image-cropper-selection-inner-border-width, var(--moduix-border-width-sm)) var(--moduix-image-cropper-selection-inner-border-color, rgb(255 255 255 / 64%)); outline: 0; cursor: grab; transition: border-color var(--moduix-image-cropper-transition, var(--moduix-transition-default)), box-shadow var(--moduix-image-cropper-transition, var(--moduix-transition-default)); &[data-shape='circle'] { border-radius: var(--moduix-image-cropper-selection-circle-radius, var(--moduix-radius-full)); border-color: transparent; } &:focus-visible { box-shadow: 0 0 0 9999px var(--moduix-image-cropper-selection-overlay-bg, rgb(0 0 0 / 45%)), inset 0 0 0 var(--moduix-image-cropper-selection-inner-border-width, var(--moduix-border-width-sm)) var(--moduix-image-cropper-selection-inner-border-color, rgb(255 255 255 / 64%)), 0 0 0 var( --moduix-image-cropper-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)) ) var(--moduix-image-cropper-focus-ring-color, var(--moduix-color-ring)); } &[data-dragging] { cursor: grabbing; } &[data-disabled] { cursor: default; } } .grid { pointer-events: none; &[data-axis='horizontal'] { border-block: var(--moduix-image-cropper-grid-width, var(--moduix-border-width-sm)) solid var(--moduix-image-cropper-grid-color, rgb(255 255 255 / 62%)); } &[data-axis='vertical'] { border-inline: var(--moduix-image-cropper-grid-width, var(--moduix-border-width-sm)) solid var(--moduix-image-cropper-grid-color, rgb(255 255 255 / 62%)); } } .handle { position: absolute; z-index: 1; box-sizing: border-box; width: var(--moduix-image-cropper-handle-size, var(--moduix-spacing-3)); height: var(--moduix-image-cropper-handle-size, var(--moduix-spacing-3)); border: var(--moduix-image-cropper-handle-border-width, var(--moduix-border-width-sm)) solid var(--moduix-image-cropper-handle-border-color, rgb(255 255 255 / 88%)); border-radius: var(--moduix-image-cropper-handle-radius, var(--moduix-radius-xs)); background-color: var(--moduix-image-cropper-handle-bg, rgb(255 255 255 / 96%)); box-shadow: var(--moduix-image-cropper-handle-shadow, 0 1px 3px rgb(15 23 42 / 18%)); transition: border-color var(--moduix-image-cropper-transition, var(--moduix-transition-default)), background-color var(--moduix-image-cropper-transition, var(--moduix-transition-default)), box-shadow var(--moduix-image-cropper-transition, var(--moduix-transition-default)), opacity var(--moduix-image-cropper-transition, var(--moduix-transition-default)); &[data-position='n'], &[data-position='s'] { width: 100% !important; height: var(--moduix-image-cropper-handle-edge-thickness, 0.2rem); border-width: 0; border-radius: var(--moduix-image-cropper-handle-edge-radius, var(--moduix-radius-full)); } &[data-position='e'], &[data-position='w'] { width: var(--moduix-image-cropper-handle-edge-thickness, 0.2rem); height: 100% !important; border-width: 0; border-radius: var(--moduix-image-cropper-handle-edge-radius, var(--moduix-radius-full)); } &[data-position='nw'], &[data-position='ne'], &[data-position='se'], &[data-position='sw'] { z-index: 2; } &[data-disabled] { display: none; } } }4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@ark-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40ark-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@ark-ui/react"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}]]}],["$","$L4f",null,{"namespace":"@moduix-react","registryDependencies":["@moduix-react/foundation"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/components/image-cropper/ImageCropper.tsx","content":"$51","type":"registry:component","target":"@components/ui/image-cropper/ImageCropper.tsx"},{"path":"src/components/image-cropper/ImageCropper.module.css","content":"$52","type":"registry:file","target":"@components/ui/image-cropper/ImageCropper.module.css"},{"path":"src/components/image-cropper/index.ts","content":"export { ImageCropper, useImageCropper, useImageCropperContext } from './ImageCropper.js';","type":"registry:component","target":"@components/ui/image-cropper/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]