4e: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"] 4f: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"] 50:T18e8,'use client'; import { Dialog as DialogPrimitive, useDialog, useDialogContext } from '@ark-ui/react/dialog'; import { ark, type HTMLArkProps } from '@ark-ui/react/factory'; import { clsx } from 'clsx'; import type { ComponentProps, ComponentRef } from 'react'; import { forwardRef } from 'react'; import { OverlayPortal, OverlayPortalProvider, type OverlayPortalProps, } from '@/lib/moduix/overlayPortal'; import { CloseButton } from '../close-button'; import styles from './Dialog.module.css'; const DEFAULT_CLOSE_BUTTON_LABEL = 'Close dialog'; type DialogRootProps = ComponentProps & OverlayPortalProps; type DialogRootProviderProps = ComponentProps & OverlayPortalProps; function DialogRoot({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }: DialogRootProps) { return ( ); } function DialogRootProvider({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }: DialogRootProviderProps) { return ( ); } const DialogTrigger = forwardRef< ComponentRef, ComponentProps >(function DialogTrigger({ asChild, className, ...props }, ref) { return ( ); }); const DialogBackdrop = forwardRef< ComponentRef, ComponentProps >(function DialogBackdrop({ className, ...props }, ref) { return ( ); }); const DialogPositioner = forwardRef< ComponentRef, ComponentProps >(function DialogPositioner({ className, ...props }, ref) { return ( ); }); const DialogContent = forwardRef< ComponentRef, ComponentProps >(function DialogContent({ className, ...props }, ref) { return ( ); }); const DialogTitle = forwardRef< ComponentRef, ComponentProps >(function DialogTitle({ className, ...props }, ref) { return ( ); }); const DialogDescription = forwardRef< ComponentRef, ComponentProps >(function DialogDescription({ className, ...props }, ref) { return ( ); }); const DialogCloseTrigger = forwardRef< ComponentRef, ComponentProps >(function DialogCloseTrigger({ asChild, className, ...props }, ref) { return ( ); }); const DialogCloseIcon = forwardRef< ComponentRef, Omit, 'asChild'> >(function DialogCloseIcon( { className, children, 'aria-label': ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref, ) { return ( {children} ); }); const DialogHeader = forwardRef, HTMLArkProps<'div'>>( function DialogHeader({ className, ...props }, ref) { return ( ); }, ); const DialogBody = forwardRef, HTMLArkProps<'div'>>( function DialogBody({ className, ...props }, ref) { return ( ); }, ); const DialogFooter = forwardRef, HTMLArkProps<'div'>>( function DialogFooter({ className, ...props }, ref) { return ( ); }, ); const Dialog = Object.assign(DialogRoot, { Root: DialogRoot, RootProvider: DialogRootProvider, Context: DialogPrimitive.Context, Trigger: DialogTrigger, Backdrop: DialogBackdrop, Positioner: DialogPositioner, Content: DialogContent, Title: DialogTitle, Description: DialogDescription, CloseTrigger: DialogCloseTrigger, CloseIcon: DialogCloseIcon, Header: DialogHeader, Body: DialogBody, Footer: DialogFooter, }); export { Dialog, useDialog, useDialogContext }; export type { DialogRootProps, DialogRootProviderProps };51:T286b,@layer moduix.components { .trigger, .closeTrigger { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: var(--moduix-dialog-control-height, var(--moduix-size-md)); margin: 0; padding: var(--moduix-dialog-control-padding-y, var(--moduix-spacing-1)) var(--moduix-dialog-control-padding-x, var(--moduix-spacing-3-5)); border: var(--moduix-dialog-control-border-width, var(--moduix-border-width-sm)) solid var(--moduix-dialog-control-border-color, var(--moduix-color-border)); border-radius: var(--moduix-dialog-control-radius, var(--moduix-radius-md)); background-color: var(--moduix-dialog-control-bg, var(--moduix-color-background)); color: var(--moduix-dialog-control-color, var(--moduix-color-foreground)); font: inherit; font-size: var(--moduix-dialog-control-font-size, var(--moduix-text-md)); line-height: var(--moduix-dialog-control-line-height, var(--moduix-line-height-text-md)); cursor: pointer; user-select: none; transition: background-color var(--moduix-transition-default), border-color var(--moduix-transition-default), color var(--moduix-transition-default); @media (hover: hover) { &:hover { background-color: var(--moduix-dialog-control-bg-hover, var(--moduix-color-accent)); } } &:focus-visible { outline: var( --moduix-dialog-focus-ring-width, var(--moduix-dialog-control-border-width, var(--moduix-border-width-sm)) ) solid var(--moduix-dialog-focus-ring-color, var(--moduix-color-ring)); outline-offset: calc( var( --moduix-dialog-focus-ring-width, var(--moduix-dialog-control-border-width, var(--moduix-border-width-sm)) ) * -1 ); } &[data-disabled], &[disabled] { pointer-events: none; opacity: var(--moduix-opacity-disabled); } } .backdrop { position: fixed; z-index: calc(var(--moduix-z-backdrop) + var(--layer-index, 0)); inset: 0; min-height: 100dvh; background-color: var( --moduix-dialog-backdrop-bg, var(--moduix-backdrop-bg, var(--moduix-color-overlay)) ); backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-dialog-backdrop-blur, 4px))); &[data-state='open'] { animation: dialog-backdrop-in var(--moduix-dialog-backdrop-transition, var(--moduix-transition-default)); } &[data-state='closed'] { animation: dialog-backdrop-out var(--moduix-dialog-backdrop-transition, var(--moduix-transition-default)); } } .positioner { box-sizing: border-box; position: fixed; z-index: calc(var(--moduix-z-modal) + var(--layer-index, 0)); inset: 0; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; padding: var(--moduix-dialog-positioner-padding, var(--moduix-spacing-4)); } .content { box-sizing: border-box; position: relative; width: min( var(--moduix-dialog-width, 28rem), var(--moduix-dialog-max-width, calc(100vw - var(--moduix-spacing-8, 2rem))) ); max-width: 100%; max-height: calc(100dvh - var(--moduix-spacing-8, 2rem)); padding: var(--moduix-dialog-padding, var(--moduix-spacing-6)); border: var(--moduix-dialog-border-width, var(--moduix-border-width-sm)) solid var(--moduix-dialog-border-color, var(--moduix-color-border)); border-radius: var(--moduix-dialog-radius, var(--moduix-radius-lg)); outline: 0; background-color: var(--moduix-dialog-bg, var(--moduix-color-popover)); color: var(--moduix-dialog-color, var(--moduix-color-popover-foreground)); box-shadow: var(--moduix-dialog-shadow, var(--moduix-shadow-lg)); transform-origin: center top; scale: 1; translate: 0 0; transition: scale var( --moduix-dialog-nested-transition, var(--moduix-dialog-transition, var(--moduix-transition-default)) ), translate var( --moduix-dialog-nested-transition, var(--moduix-dialog-transition, var(--moduix-transition-default)) ); &::after { content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit; background-color: var(--moduix-dialog-nested-overlay-bg, rgb(0 0 0 / 0.05)); opacity: 0; pointer-events: none; transition: opacity var( --moduix-dialog-nested-transition, var(--moduix-dialog-transition, var(--moduix-transition-default)) ); } &[data-has-nested] { scale: calc(1 - var(--moduix-dialog-nested-scale-step, 0.05) * var(--nested-layer-count, 0)); translate: 0 calc( var(--moduix-dialog-nested-translate-step, var(--moduix-spacing-10)) * var(--nested-layer-count, 0) ); &::after { opacity: 1; } } &[data-state='open'] { animation: dialog-content-in var( --moduix-dialog-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal)) var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)) ); } &[data-state='closed'] { animation: dialog-content-out var( --moduix-dialog-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal)) var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)) ); } } .header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--moduix-dialog-header-gap, var(--moduix-spacing-1)); & > [data-slot='dialog-title'] { grid-column: 1; } & > [data-slot='dialog-close-trigger'] { grid-column: 2; justify-self: end; } & > [data-slot='dialog-description'] { grid-column: 1 / -1; } } .title { margin: 0; color: var( --moduix-dialog-title-color, var(--moduix-dialog-color, var(--moduix-color-popover-foreground)) ); font-size: var(--moduix-dialog-title-font-size, var(--moduix-text-lg)); font-weight: var(--moduix-dialog-title-font-weight, var(--moduix-weight-semibold)); line-height: var(--moduix-dialog-title-line-height, var(--moduix-line-height-text-lg)); } .description, .body { color: var( --moduix-dialog-description-color, var(--moduix-dialog-muted-color, var(--moduix-color-muted-foreground)) ); font-size: var(--moduix-dialog-description-font-size, var(--moduix-text-md)); line-height: var(--moduix-dialog-description-line-height, var(--moduix-line-height-text-md)); } .description { margin: 0; } .body { margin: var(--moduix-dialog-content-margin, var(--moduix-spacing-4) 0 0); } .footer { display: flex; justify-content: flex-end; gap: var(--moduix-dialog-footer-gap, var(--moduix-spacing-2)); margin-block-start: var(--moduix-dialog-footer-margin-top, var(--moduix-spacing-6)); } .closeIcon { --moduix-close-button-size: var(--moduix-dialog-close-icon-size, var(--moduix-spacing-7)); --moduix-close-button-radius: var(--moduix-dialog-close-icon-radius, var(--moduix-radius-md)); --moduix-close-button-color: var( --moduix-dialog-close-icon-color, var(--moduix-dialog-muted-color, var(--moduix-color-muted-foreground)) ); --moduix-close-button-color-hover: var( --moduix-dialog-close-icon-color-hover, var( --moduix-dialog-close-icon-color, var(--moduix-dialog-color, var(--moduix-color-popover-foreground)) ) ); --moduix-close-button-bg: var(--moduix-dialog-close-icon-bg, transparent); --moduix-close-button-bg-hover: var( --moduix-dialog-close-icon-bg-hover, var(--moduix-color-accent) ); --moduix-close-button-focus-ring-color: var( --moduix-dialog-close-icon-focus-ring-color, var(--moduix-dialog-focus-ring-color, var(--moduix-color-ring)) ); --moduix-close-button-icon-size: var( --moduix-dialog-close-icon-glyph-size, var(--moduix-spacing-3) ); position: absolute; z-index: 2; inset-block-start: var(--moduix-dialog-close-icon-inset-block-start, var(--moduix-spacing-4)); inset-inline-end: var(--moduix-dialog-close-icon-inset-inline-end, var(--moduix-spacing-4)); } @keyframes dialog-backdrop-in { from { opacity: var(--moduix-dialog-backdrop-starting-opacity, 0); backdrop-filter: var(--moduix-dialog-backdrop-starting-blur, none); } } @keyframes dialog-backdrop-out { to { opacity: var(--moduix-dialog-backdrop-ending-opacity, 0); backdrop-filter: var(--moduix-dialog-backdrop-ending-blur, none); } } @keyframes dialog-content-in { from { opacity: var( --moduix-dialog-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0) ); translate: var( --moduix-dialog-content-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0) ) var( --moduix-dialog-content-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0) ); scale: var( --moduix-dialog-content-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup)) ); } } @keyframes dialog-content-out { to { opacity: var( --moduix-dialog-content-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0) ); translate: var( --moduix-dialog-content-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0) ) var( --moduix-dialog-content-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0) ); scale: var( --moduix-dialog-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)) ); } } @media (prefers-reduced-motion: reduce) { .backdrop[data-state], .content[data-state] { animation-delay: 0ms; animation-duration: 1ms; } .content { transition: none; } } }4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@moduix-react","registryDependencies":["@moduix-react/foundation","@moduix-react/close-button","@moduix-react/overlay-portal"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/dialog/Dialog.tsx","content":"$50","type":"registry:component","target":"@components/ui/dialog/Dialog.tsx"},{"path":"src/components/dialog/Dialog.module.css","content":"$51","type":"registry:file","target":"@components/ui/dialog/Dialog.module.css"},{"path":"src/components/dialog/index.ts","content":"export { Dialog, useDialog, useDialogContext } from './Dialog.js';\nexport type { DialogRootProps, DialogRootProviderProps } from './Dialog.js';","type":"registry:component","target":"@components/ui/dialog/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]