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:T1e6e,'use client'; import { ark, type HTMLArkProps } from '@ark-ui/react/factory'; import { Popover as PopoverPrimitive, usePopover, usePopoverContext } from '@ark-ui/react/popover'; 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 './Popover.module.css'; const DEFAULT_CLOSE_BUTTON_LABEL = 'Close popover'; export type PopoverRootProps = ComponentProps & OverlayPortalProps; export type PopoverRootProviderProps = ComponentProps & { portalRef?: OverlayPortalProps['portalRef']; }; function PopoverRoot({ lazyMount = true, modal, portalled, portalRef, unmountOnExit = true, ...props }: PopoverRootProps) { const resolvedPortalled = modal || portalled; return ( ); } function PopoverRootProvider({ lazyMount = true, portalRef, unmountOnExit = true, value, ...props }: PopoverRootProviderProps) { return ( ); } const PopoverAnchor = forwardRef< ComponentRef, ComponentProps >(function PopoverAnchor({ className, ...props }, ref) { return ( ); }); const PopoverTrigger = forwardRef< ComponentRef, ComponentProps >(function PopoverTrigger({ asChild, className, ...props }, ref) { return ( ); }); const PopoverIndicator = forwardRef< ComponentRef, ComponentProps >(function PopoverIndicator({ className, ...props }, ref) { return ( ); }); const PopoverPositioner = forwardRef< ComponentRef, ComponentProps >(function PopoverPositioner({ className, ...props }, ref) { return ( ); }); const PopoverContent = forwardRef< ComponentRef, ComponentProps >(function PopoverContent({ className, ...props }, ref) { return ( ); }); const PopoverArrow = forwardRef< ComponentRef, ComponentProps >(function PopoverArrow({ className, children, ...props }, ref) { return ( {children ?? } ); }); const PopoverArrowTip = forwardRef< ComponentRef, ComponentProps >(function PopoverArrowTip({ className, ...props }, ref) { return ( ); }); const PopoverTitle = forwardRef< ComponentRef, ComponentProps >(function PopoverTitle({ className, ...props }, ref) { return ( ); }); const PopoverDescription = forwardRef< ComponentRef, ComponentProps >(function PopoverDescription({ className, ...props }, ref) { return ( ); }); const PopoverCloseTrigger = forwardRef< ComponentRef, ComponentProps >(function PopoverCloseTrigger({ asChild, className, ...props }, ref) { return ( ); }); const PopoverCloseIcon = forwardRef< ComponentRef, Omit, 'asChild'> >(function PopoverCloseIcon( { className, children, 'aria-label': ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref, ) { return ( {children} ); }); const PopoverHeader = forwardRef, HTMLArkProps<'div'>>( function PopoverHeader({ className, ...props }, ref) { return ( ); }, ); const PopoverBody = forwardRef, HTMLArkProps<'div'>>( function PopoverBody({ className, ...props }, ref) { return ( ); }, ); const PopoverFooter = forwardRef, HTMLArkProps<'div'>>( function PopoverFooter({ className, ...props }, ref) { return ( ); }, ); const Popover = Object.assign(PopoverRoot, { Root: PopoverRoot, RootProvider: PopoverRootProvider, Context: PopoverPrimitive.Context, Anchor: PopoverAnchor, Trigger: PopoverTrigger, Indicator: PopoverIndicator, Positioner: PopoverPositioner, Content: PopoverContent, Arrow: PopoverArrow, ArrowTip: PopoverArrowTip, Title: PopoverTitle, Description: PopoverDescription, CloseTrigger: PopoverCloseTrigger, CloseIcon: PopoverCloseIcon, Header: PopoverHeader, Body: PopoverBody, Footer: PopoverFooter, }); export { Popover, usePopover, usePopoverContext };52:T25b0,@layer moduix.components { .trigger, .closeTrigger { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: var(--moduix-popover-control-height, var(--moduix-size-md)); margin: 0; padding: var(--moduix-popover-control-padding-y, var(--moduix-spacing-1)) var(--moduix-popover-control-padding-x, var(--moduix-spacing-3-5)); border: var(--moduix-popover-control-border-width, var(--moduix-border-width-sm)) solid var(--moduix-popover-control-border-color, var(--moduix-color-border)); border-radius: var(--moduix-popover-control-radius, var(--moduix-radius-md)); background-color: var(--moduix-popover-control-bg, var(--moduix-color-background)); color: var(--moduix-popover-control-color, var(--moduix-color-foreground)); font: inherit; font-size: var(--moduix-popover-control-font-size, var(--moduix-text-md)); line-height: var(--moduix-popover-control-line-height, var(--moduix-line-height-text-md)); user-select: none; outline: 0; cursor: pointer; transition: background-color var(--moduix-popover-transition, var(--moduix-transition-default)), border-color var(--moduix-popover-transition, var(--moduix-transition-default)), color var(--moduix-popover-transition, var(--moduix-transition-default)); @media (hover: hover) { &:hover { background-color: var(--moduix-popover-control-bg-hover, var(--moduix-color-accent)); } } &:active, &[data-state='open']:not([data-value]), &[data-state='open'][data-current] { background-color: var( --moduix-popover-control-bg-active, var(--moduix-popover-control-bg-hover, var(--moduix-color-accent)) ); } &:focus-visible { outline: var( --moduix-popover-focus-ring-width, var( --moduix-popover-control-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)) ) ) solid var(--moduix-popover-focus-ring-color, var(--moduix-color-ring)); outline-offset: calc( var( --moduix-popover-focus-ring-width, var( --moduix-popover-control-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)) ) ) * -1 ); } &[data-disabled], &[disabled] { pointer-events: none; opacity: var(--moduix-popover-disabled-opacity, var(--moduix-opacity-disabled)); } } .positioner { z-index: var(--z-index, var(--moduix-z-popup)); max-width: var(--available-width); outline: 0; } .content { --_popover-close-icon-size-effective: var( --moduix-popover-close-icon-size, var(--moduix-spacing-7) ); --_popover-close-icon-offset-effective: var( --moduix-popover-close-icon-offset, var(--moduix-spacing-3) ); --_popover-header-padding-inline-end-effective: var( --moduix-popover-header-padding-inline-end, calc(var(--_popover-close-icon-size-effective) + var(--_popover-close-icon-offset-effective)) ); position: relative; z-index: calc(var(--moduix-z-popup) + var(--layer-index, 0)); box-sizing: border-box; width: var(--moduix-popover-width, auto); height: var(--moduix-popover-height, auto); min-width: min(var(--moduix-popover-min-width, 16rem), var(--available-width)); max-width: min(var(--moduix-popover-max-width, 28rem), var(--available-width)); max-height: min(var(--moduix-popover-max-height, 24rem), var(--available-height, 100dvh)); overflow: visible; overflow-wrap: anywhere; padding: var(--moduix-popover-padding-y, var(--moduix-spacing-4)) var(--moduix-popover-padding-x, var(--moduix-spacing-4)); border: 0; border-radius: var(--moduix-popover-radius, var(--moduix-radius-md)); background-color: var(--moduix-popover-bg, var(--moduix-color-popover)); color: var(--moduix-popover-color, var(--moduix-color-popover-foreground)); outline: var(--moduix-popover-border-width, var(--moduix-border-width-sm)) solid var(--moduix-popover-border-color, var(--moduix-color-border)); box-shadow: var(--moduix-popover-shadow, var(--moduix-shadow-lg)); transform-origin: var(--transform-origin); &[data-state='open'] { animation: popover-enter var( --moduix-popover-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast)) var(--moduix-popup-motion-easing, ease) ) both; } &[data-state='closed'] { animation: popover-exit var( --moduix-popover-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-fast)) var(--moduix-popup-motion-easing, ease) ) both; } &:has(> .body) { display: flex; flex-direction: column; > .body { min-block-size: 0; overflow: auto; } } &:has(.closeIcon) { .header { padding-inline-end: var(--_popover-header-padding-inline-end-effective); } } } .arrow { --arrow-size: var(--moduix-popover-arrow-size, var(--moduix-spacing-2-5)); --arrow-background: var(--moduix-popover-bg, var(--moduix-color-popover)); } .arrowTip { border-top: var(--moduix-popover-border-width, var(--moduix-border-width-sm)) solid var( --moduix-popover-arrow-stroke-color, var(--moduix-popover-border-color, var(--moduix-color-border)) ); border-left: var(--moduix-popover-border-width, var(--moduix-border-width-sm)) solid var( --moduix-popover-arrow-stroke-color, var(--moduix-popover-border-color, var(--moduix-color-border)) ); } .title { margin: 0; color: var( --moduix-popover-title-color, var(--moduix-popover-color, var(--moduix-color-popover-foreground)) ); font-size: var(--moduix-popover-title-font-size, var(--moduix-text-md)); font-weight: var(--moduix-popover-title-font-weight, var(--moduix-weight-semibold)); line-height: var(--moduix-popover-title-line-height, var(--moduix-line-height-text-md)); } .description { margin: var(--moduix-popover-description-margin, 0); color: var(--moduix-popover-description-color, var(--moduix-color-muted-foreground)); font-size: var(--moduix-popover-description-font-size, var(--moduix-text-sm)); line-height: var(--moduix-popover-description-line-height, var(--moduix-line-height-text-sm)); } .closeIcon { --moduix-close-button-size: var(--_popover-close-icon-size-effective); --moduix-close-button-radius: var(--moduix-popover-close-icon-radius, var(--moduix-radius-sm)); --moduix-close-button-icon-size: var( --moduix-popover-close-icon-glyph-size, var(--moduix-spacing-3-5) ); --moduix-close-button-bg: var(--moduix-popover-close-icon-bg, transparent); --moduix-close-button-bg-hover: var( --moduix-popover-close-icon-bg-hover, var(--moduix-color-accent) ); --moduix-close-button-color: var( --moduix-popover-close-icon-color, var(--moduix-color-muted-foreground) ); --moduix-close-button-color-hover: var( --moduix-popover-close-icon-color-hover, var(--moduix-popover-color, var(--moduix-color-popover-foreground)) ); --moduix-close-button-focus-ring-color: var( --moduix-popover-close-icon-focus-ring-color, var(--moduix-color-ring) ); position: absolute; inset-block-start: var(--_popover-close-icon-offset-effective); inset-inline-end: var(--_popover-close-icon-offset-effective); } .header { display: grid; gap: var(--moduix-popover-header-gap, var(--moduix-spacing-1)); } .body { margin: var(--moduix-popover-body-margin, 0); } .footer { display: flex; align-items: center; justify-content: var(--moduix-popover-footer-justify, flex-end); gap: var(--moduix-popover-footer-gap, var(--moduix-spacing-2)); margin: var(--moduix-popover-footer-margin, var(--moduix-spacing-3) 0 0); } @media (prefers-reduced-motion: reduce) { .trigger, .closeTrigger { transition: none; } .content { &[data-state='open'], &[data-state='closed'] { animation: none; } } } @keyframes popover-enter { from { opacity: var( --moduix-popover-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0) ); translate: var( --moduix-popover-content-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0) ) var( --moduix-popover-content-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0) ); scale: var( --moduix-popover-content-starting-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup)) ); } } @keyframes popover-exit { to { opacity: var( --moduix-popover-content-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0) ); translate: var( --moduix-popover-content-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0) ) var( --moduix-popover-content-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0) ); scale: var( --moduix-popover-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)) ); } } }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/close-button","@moduix-react/foundation","@moduix-react/overlay-portal"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/components/popover/Popover.tsx","content":"$51","type":"registry:component","target":"@components/ui/popover/Popover.tsx"},{"path":"src/components/popover/Popover.module.css","content":"$52","type":"registry:file","target":"@components/ui/popover/Popover.module.css"},{"path":"src/components/popover/index.ts","content":"export { Popover, usePopover, usePopoverContext } from './Popover.js';\nexport type { PopoverRootProps, PopoverRootProviderProps } from './Popover.js';","type":"registry:component","target":"@components/ui/popover/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]