[{"data":1,"prerenderedAt":3540},["ShallowReactive",2],{"page-\u002Fblog\u002Freusable-alert-dialog-vue-react":3},{"id":4,"title":5,"body":6,"cover":3525,"date":3526,"description":3527,"extension":3528,"image":3529,"meta":3530,"navigation":127,"ogImage":3525,"path":3532,"readTime":177,"robots":3525,"schemaOrg":3525,"seo":3533,"sitemap":3534,"stem":3535,"tags":3536,"__hash__":3539},"blog\u002Fblog\u002Freusable-alert-dialog-vue-react.md","Reusable alert dialog in Vue and React",{"type":7,"value":8,"toc":3523},"minimark",[9,13,20,49,60,63,66,3511,3520],[10,11,12],"p",{},"Every app eventually needs one of those \"Are you sure?\" dialogs. You click delete, and a little box pops up asking you to confirm. Simple enough, but if you've ever wired up that modal state by hand more than twice, you know how tedious it gets. A boolean to track visibility, a callback for confirm, another for cancel, and suddenly your component is drowning in dialog plumbing.",[10,14,15],{},[16,17],"img",{"alt":18,"src":19},"Alert Dialog","\u002Fimages\u002Falert-dialog.webp",[10,21,22,23,27,28,32,33,36,37,40,41,44,45,48],{},"A better approach would be a ",[24,25,26],"strong",{},"Promise-based"," ",[29,30,31],"code",{},"useAlert"," composable (Vue) or hook (React) that you can call like a regular async function. Call ",[29,34,35],{},"show(...)",", ",[29,38,39],{},"await"," the result, and get back ",[29,42,43],{},"true"," or ",[29,46,47],{},"false",". No state management, no prop drilling, just a clean one-liner wherever you need confirmation.",[10,50,51,52,55,56,59],{},"The idea is simple. We create a single alert dialog component that lives at the root of our app. A shared piece of state holds the current dialog data and a ",[29,53,54],{},"resolve"," function. When you call ",[29,57,58],{},"useAlert().show(...)",", it sets that state and returns a Promise. The dialog appears, the user clicks OK or Cancel, and the Promise resolves. That's it.",[10,61,62],{},"The focus of this post is entirely on the logic, not the styling. We're using plain HTML and basic CSS here for clarity, but you could easily swap in any UI library (like Radix, Headless UI, shadcn\u002Fui, etc.) for the modal itself and the underlying logic would stay exactly the same.",[10,64,65],{},"Below is the full implementation in both Vue and React.",[67,68,69,1743],"tabs",{},[70,71,73],"tabs-item",{"label":72},"Vue 3",[74,75,77,454,1389,1479],"code-tree",{"default-value":76},"composables\u002FuseAlert.ts",[78,79,84],"pre",{"className":80,"code":81,"filename":76,"language":82,"meta":83,"style":83},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { ref } from \"vue\";\n\nexport type AlertDialogProps = {\n  data: {\n    title?: string;\n    message: string;\n    confirmText?: string;\n    cancelText?: string;\n  };\n  resolve: (value: boolean) => void;\n};\n\nconst current = ref\u003CAlertDialogProps>();\n\nconst show = (data: AlertDialogProps[\"data\"]): Promise\u003Cboolean> => {\n  return new Promise((resolve) => {\n    current.value = { data, resolve };\n  });\n};\n\nexport const useAlert = () => {\n  return { current, show };\n};\n","ts","",[29,85,86,122,129,149,161,175,187,199,211,217,248,254,259,288,293,341,365,392,402,407,412,432,449],{"__ignoreMap":83},[87,88,91,95,99,103,106,109,112,116,119],"span",{"class":89,"line":90},"line",1,[87,92,94],{"class":93},"s7zQu","import",[87,96,98],{"class":97},"sMK4o"," {",[87,100,102],{"class":101},"sTEyZ"," ref",[87,104,105],{"class":97}," }",[87,107,108],{"class":93}," from",[87,110,111],{"class":97}," \"",[87,113,115],{"class":114},"sfazB","vue",[87,117,118],{"class":97},"\"",[87,120,121],{"class":97},";\n",[87,123,125],{"class":89,"line":124},2,[87,126,128],{"emptyLinePlaceholder":127},true,"\n",[87,130,132,135,139,143,146],{"class":89,"line":131},3,[87,133,134],{"class":93},"export",[87,136,138],{"class":137},"spNyl"," type",[87,140,142],{"class":141},"sBMFI"," AlertDialogProps",[87,144,145],{"class":97}," =",[87,147,148],{"class":97}," {\n",[87,150,152,156,159],{"class":89,"line":151},4,[87,153,155],{"class":154},"swJcz","  data",[87,157,158],{"class":97},":",[87,160,148],{"class":97},[87,162,164,167,170,173],{"class":89,"line":163},5,[87,165,166],{"class":154},"    title",[87,168,169],{"class":97},"?:",[87,171,172],{"class":141}," string",[87,174,121],{"class":97},[87,176,178,181,183,185],{"class":89,"line":177},6,[87,179,180],{"class":154},"    message",[87,182,158],{"class":97},[87,184,172],{"class":141},[87,186,121],{"class":97},[87,188,190,193,195,197],{"class":89,"line":189},7,[87,191,192],{"class":154},"    confirmText",[87,194,169],{"class":97},[87,196,172],{"class":141},[87,198,121],{"class":97},[87,200,202,205,207,209],{"class":89,"line":201},8,[87,203,204],{"class":154},"    cancelText",[87,206,169],{"class":97},[87,208,172],{"class":141},[87,210,121],{"class":97},[87,212,214],{"class":89,"line":213},9,[87,215,216],{"class":97},"  };\n",[87,218,220,223,225,228,232,234,237,240,243,246],{"class":89,"line":219},10,[87,221,222],{"class":154},"  resolve",[87,224,158],{"class":97},[87,226,227],{"class":97}," (",[87,229,231],{"class":230},"sHdIc","value",[87,233,158],{"class":97},[87,235,236],{"class":141}," boolean",[87,238,239],{"class":97},")",[87,241,242],{"class":137}," =>",[87,244,245],{"class":141}," void",[87,247,121],{"class":97},[87,249,251],{"class":89,"line":250},11,[87,252,253],{"class":97},"};\n",[87,255,257],{"class":89,"line":256},12,[87,258,128],{"emptyLinePlaceholder":127},[87,260,262,265,268,271,274,277,280,283,286],{"class":89,"line":261},13,[87,263,264],{"class":137},"const",[87,266,267],{"class":101}," current ",[87,269,270],{"class":97},"=",[87,272,102],{"class":273},"s2Zo4",[87,275,276],{"class":97},"\u003C",[87,278,279],{"class":141},"AlertDialogProps",[87,281,282],{"class":97},">",[87,284,285],{"class":101},"()",[87,287,121],{"class":97},[87,289,291],{"class":89,"line":290},14,[87,292,128],{"emptyLinePlaceholder":127},[87,294,296,298,301,303,305,308,310,312,315,317,319,321,324,327,330,332,335,337,339],{"class":89,"line":295},15,[87,297,264],{"class":137},[87,299,300],{"class":101}," show ",[87,302,270],{"class":97},[87,304,227],{"class":97},[87,306,307],{"class":230},"data",[87,309,158],{"class":97},[87,311,142],{"class":141},[87,313,314],{"class":101},"[",[87,316,118],{"class":97},[87,318,307],{"class":114},[87,320,118],{"class":97},[87,322,323],{"class":101},"]",[87,325,326],{"class":97},"):",[87,328,329],{"class":141}," Promise",[87,331,276],{"class":97},[87,333,334],{"class":141},"boolean",[87,336,282],{"class":97},[87,338,242],{"class":137},[87,340,148],{"class":97},[87,342,344,347,350,352,355,357,359,361,363],{"class":89,"line":343},16,[87,345,346],{"class":93},"  return",[87,348,349],{"class":97}," new",[87,351,329],{"class":141},[87,353,354],{"class":154},"(",[87,356,354],{"class":97},[87,358,54],{"class":230},[87,360,239],{"class":97},[87,362,242],{"class":137},[87,364,148],{"class":97},[87,366,368,371,374,376,378,380,383,386,389],{"class":89,"line":367},17,[87,369,370],{"class":101},"    current",[87,372,373],{"class":97},".",[87,375,231],{"class":101},[87,377,145],{"class":97},[87,379,98],{"class":97},[87,381,382],{"class":101}," data",[87,384,385],{"class":97},",",[87,387,388],{"class":101}," resolve",[87,390,391],{"class":97}," };\n",[87,393,395,398,400],{"class":89,"line":394},18,[87,396,397],{"class":97},"  }",[87,399,239],{"class":154},[87,401,121],{"class":97},[87,403,405],{"class":89,"line":404},19,[87,406,253],{"class":97},[87,408,410],{"class":89,"line":409},20,[87,411,128],{"emptyLinePlaceholder":127},[87,413,415,417,420,423,425,428,430],{"class":89,"line":414},21,[87,416,134],{"class":93},[87,418,419],{"class":137}," const",[87,421,422],{"class":101}," useAlert ",[87,424,270],{"class":97},[87,426,427],{"class":97}," ()",[87,429,242],{"class":137},[87,431,148],{"class":97},[87,433,435,437,439,442,444,447],{"class":89,"line":434},22,[87,436,346],{"class":93},[87,438,98],{"class":97},[87,440,441],{"class":101}," current",[87,443,385],{"class":97},[87,445,446],{"class":101}," show",[87,448,391],{"class":97},[87,450,452],{"class":89,"line":451},23,[87,453,253],{"class":97},[78,455,459],{"className":456,"code":457,"filename":458,"language":115,"meta":83,"style":83},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useAlert } from \"@\u002Fcomposables\u002FuseAlert\";\n\nconst { current } = useAlert();\n\nconst handleConfirm = () => {\n  current.value?.resolve(true);\n  current.value = undefined;\n};\n\nconst handleCancel = () => {\n  current.value?.resolve(false);\n  current.value = undefined;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"current !== undefined\" class=\"dialog-backdrop\">\n    \u003Cdiv class=\"dialog\">\n      \u003Ch3 v-if=\"current.data.title\">{{ current.data.title }}\u003C\u002Fh3>\n      \u003Cp>{{ current.data.message }}\u003C\u002Fp>\n      \u003Cdiv class=\"dialog-actions\">\n        \u003Cbutton class=\"dialog-btn\" @click=\"handleCancel\">\n          {{ current.data.cancelText || \"Cancel\" }}\n        \u003C\u002Fbutton>\n        \u003Cbutton class=\"dialog-btn dialog-btn-primary\" @click=\"handleConfirm\">\n          {{ current.data.confirmText || \"OK\" }}\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.dialog-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n.dialog {\n  background: #fff;\n  border-radius: 8px;\n  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);\n  padding: 2rem;\n  min-width: 320px;\n  max-width: 90vw;\n}\n.dialog-actions {\n  display: flex;\n  gap: 1rem;\n  margin-top: 2rem;\n  justify-content: flex-end;\n}\n.dialog-btn {\n  padding: 0.5rem 1.5rem;\n  border-radius: 4px;\n  border: none;\n  background: #eee;\n  cursor: pointer;\n  font-size: 1rem;\n}\n.dialog-btn-primary {\n  background: #007bff;\n  color: #fff;\n}\n\u003C\u002Fstyle>\n","components\u002FAlertDialog.vue",[29,460,461,485,507,511,530,534,549,572,585,589,593,608,628,640,644,653,657,666,700,720,750,767,786,819,825,835,866,872,881,891,901,911,920,925,938,947,961,975,1007,1020,1033,1045,1058,1064,1073,1088,1101,1138,1151,1164,1177,1182,1191,1202,1215,1227,1239,1244,1253,1268,1280,1293,1307,1320,1332,1337,1347,1361,1375,1380],{"__ignoreMap":83},[87,462,463,465,468,471,474,476,478,480,482],{"class":89,"line":90},[87,464,276],{"class":97},[87,466,467],{"class":154},"script",[87,469,470],{"class":137}," setup",[87,472,473],{"class":137}," lang",[87,475,270],{"class":97},[87,477,118],{"class":97},[87,479,82],{"class":114},[87,481,118],{"class":97},[87,483,484],{"class":97},">\n",[87,486,487,489,491,494,496,498,500,503,505],{"class":89,"line":124},[87,488,94],{"class":93},[87,490,98],{"class":97},[87,492,493],{"class":101}," useAlert",[87,495,105],{"class":97},[87,497,108],{"class":93},[87,499,111],{"class":97},[87,501,502],{"class":114},"@\u002Fcomposables\u002FuseAlert",[87,504,118],{"class":97},[87,506,121],{"class":97},[87,508,509],{"class":89,"line":131},[87,510,128],{"emptyLinePlaceholder":127},[87,512,513,515,517,519,522,524,526,528],{"class":89,"line":151},[87,514,264],{"class":137},[87,516,98],{"class":97},[87,518,267],{"class":101},[87,520,521],{"class":97},"}",[87,523,145],{"class":97},[87,525,493],{"class":273},[87,527,285],{"class":101},[87,529,121],{"class":97},[87,531,532],{"class":89,"line":163},[87,533,128],{"emptyLinePlaceholder":127},[87,535,536,538,541,543,545,547],{"class":89,"line":177},[87,537,264],{"class":137},[87,539,540],{"class":101}," handleConfirm ",[87,542,270],{"class":97},[87,544,427],{"class":97},[87,546,242],{"class":137},[87,548,148],{"class":97},[87,550,551,554,556,558,561,563,565,568,570],{"class":89,"line":189},[87,552,553],{"class":101},"  current",[87,555,373],{"class":97},[87,557,231],{"class":101},[87,559,560],{"class":97},"?.",[87,562,54],{"class":273},[87,564,354],{"class":154},[87,566,43],{"class":567},"sfNiH",[87,569,239],{"class":154},[87,571,121],{"class":97},[87,573,574,576,578,580,582],{"class":89,"line":201},[87,575,553],{"class":101},[87,577,373],{"class":97},[87,579,231],{"class":101},[87,581,145],{"class":97},[87,583,584],{"class":97}," undefined;\n",[87,586,587],{"class":89,"line":213},[87,588,253],{"class":97},[87,590,591],{"class":89,"line":219},[87,592,128],{"emptyLinePlaceholder":127},[87,594,595,597,600,602,604,606],{"class":89,"line":250},[87,596,264],{"class":137},[87,598,599],{"class":101}," handleCancel ",[87,601,270],{"class":97},[87,603,427],{"class":97},[87,605,242],{"class":137},[87,607,148],{"class":97},[87,609,610,612,614,616,618,620,622,624,626],{"class":89,"line":256},[87,611,553],{"class":101},[87,613,373],{"class":97},[87,615,231],{"class":101},[87,617,560],{"class":97},[87,619,54],{"class":273},[87,621,354],{"class":154},[87,623,47],{"class":567},[87,625,239],{"class":154},[87,627,121],{"class":97},[87,629,630,632,634,636,638],{"class":89,"line":261},[87,631,553],{"class":101},[87,633,373],{"class":97},[87,635,231],{"class":101},[87,637,145],{"class":97},[87,639,584],{"class":97},[87,641,642],{"class":89,"line":290},[87,643,253],{"class":97},[87,645,646,649,651],{"class":89,"line":295},[87,647,648],{"class":97},"\u003C\u002F",[87,650,467],{"class":154},[87,652,484],{"class":97},[87,654,655],{"class":89,"line":343},[87,656,128],{"emptyLinePlaceholder":127},[87,658,659,661,664],{"class":89,"line":367},[87,660,276],{"class":97},[87,662,663],{"class":154},"template",[87,665,484],{"class":97},[87,667,668,671,674,677,679,681,684,686,689,691,693,696,698],{"class":89,"line":394},[87,669,670],{"class":97},"  \u003C",[87,672,673],{"class":154},"div",[87,675,676],{"class":137}," v-if",[87,678,270],{"class":97},[87,680,118],{"class":97},[87,682,683],{"class":114},"current !== undefined",[87,685,118],{"class":97},[87,687,688],{"class":137}," class",[87,690,270],{"class":97},[87,692,118],{"class":97},[87,694,695],{"class":114},"dialog-backdrop",[87,697,118],{"class":97},[87,699,484],{"class":97},[87,701,702,705,707,709,711,713,716,718],{"class":89,"line":404},[87,703,704],{"class":97},"    \u003C",[87,706,673],{"class":154},[87,708,688],{"class":137},[87,710,270],{"class":97},[87,712,118],{"class":97},[87,714,715],{"class":114},"dialog",[87,717,118],{"class":97},[87,719,484],{"class":97},[87,721,722,725,728,730,732,734,737,739,741,744,746,748],{"class":89,"line":409},[87,723,724],{"class":97},"      \u003C",[87,726,727],{"class":154},"h3",[87,729,676],{"class":137},[87,731,270],{"class":97},[87,733,118],{"class":97},[87,735,736],{"class":114},"current.data.title",[87,738,118],{"class":97},[87,740,282],{"class":97},[87,742,743],{"class":101},"{{ current.data.title }}",[87,745,648],{"class":97},[87,747,727],{"class":154},[87,749,484],{"class":97},[87,751,752,754,756,758,761,763,765],{"class":89,"line":414},[87,753,724],{"class":97},[87,755,10],{"class":154},[87,757,282],{"class":97},[87,759,760],{"class":101},"{{ current.data.message }}",[87,762,648],{"class":97},[87,764,10],{"class":154},[87,766,484],{"class":97},[87,768,769,771,773,775,777,779,782,784],{"class":89,"line":434},[87,770,724],{"class":97},[87,772,673],{"class":154},[87,774,688],{"class":137},[87,776,270],{"class":97},[87,778,118],{"class":97},[87,780,781],{"class":114},"dialog-actions",[87,783,118],{"class":97},[87,785,484],{"class":97},[87,787,788,791,794,796,798,800,803,805,808,810,812,815,817],{"class":89,"line":451},[87,789,790],{"class":97},"        \u003C",[87,792,793],{"class":154},"button",[87,795,688],{"class":137},[87,797,270],{"class":97},[87,799,118],{"class":97},[87,801,802],{"class":114},"dialog-btn",[87,804,118],{"class":97},[87,806,807],{"class":137}," @click",[87,809,270],{"class":97},[87,811,118],{"class":97},[87,813,814],{"class":114},"handleCancel",[87,816,118],{"class":97},[87,818,484],{"class":97},[87,820,822],{"class":89,"line":821},24,[87,823,824],{"class":101},"          {{ current.data.cancelText || \"Cancel\" }}\n",[87,826,828,831,833],{"class":89,"line":827},25,[87,829,830],{"class":97},"        \u003C\u002F",[87,832,793],{"class":154},[87,834,484],{"class":97},[87,836,838,840,842,844,846,848,851,853,855,857,859,862,864],{"class":89,"line":837},26,[87,839,790],{"class":97},[87,841,793],{"class":154},[87,843,688],{"class":137},[87,845,270],{"class":97},[87,847,118],{"class":97},[87,849,850],{"class":114},"dialog-btn dialog-btn-primary",[87,852,118],{"class":97},[87,854,807],{"class":137},[87,856,270],{"class":97},[87,858,118],{"class":97},[87,860,861],{"class":114},"handleConfirm",[87,863,118],{"class":97},[87,865,484],{"class":97},[87,867,869],{"class":89,"line":868},27,[87,870,871],{"class":101},"          {{ current.data.confirmText || \"OK\" }}\n",[87,873,875,877,879],{"class":89,"line":874},28,[87,876,830],{"class":97},[87,878,793],{"class":154},[87,880,484],{"class":97},[87,882,884,887,889],{"class":89,"line":883},29,[87,885,886],{"class":97},"      \u003C\u002F",[87,888,673],{"class":154},[87,890,484],{"class":97},[87,892,894,897,899],{"class":89,"line":893},30,[87,895,896],{"class":97},"    \u003C\u002F",[87,898,673],{"class":154},[87,900,484],{"class":97},[87,902,904,907,909],{"class":89,"line":903},31,[87,905,906],{"class":97},"  \u003C\u002F",[87,908,673],{"class":154},[87,910,484],{"class":97},[87,912,914,916,918],{"class":89,"line":913},32,[87,915,648],{"class":97},[87,917,663],{"class":154},[87,919,484],{"class":97},[87,921,923],{"class":89,"line":922},33,[87,924,128],{"emptyLinePlaceholder":127},[87,926,928,930,933,936],{"class":89,"line":927},34,[87,929,276],{"class":97},[87,931,932],{"class":154},"style",[87,934,935],{"class":137}," scoped",[87,937,484],{"class":97},[87,939,941,943,945],{"class":89,"line":940},35,[87,942,373],{"class":97},[87,944,695],{"class":141},[87,946,148],{"class":97},[87,948,950,954,956,959],{"class":89,"line":949},36,[87,951,953],{"class":952},"sqsOY","  position",[87,955,158],{"class":97},[87,957,958],{"class":101}," fixed",[87,960,121],{"class":97},[87,962,964,967,969,973],{"class":89,"line":963},37,[87,965,966],{"class":952},"  inset",[87,968,158],{"class":97},[87,970,972],{"class":971},"sbssI"," 0",[87,974,121],{"class":97},[87,976,978,981,983,986,988,991,993,995,997,999,1001,1004],{"class":89,"line":977},38,[87,979,980],{"class":952},"  background",[87,982,158],{"class":97},[87,984,985],{"class":273}," rgba",[87,987,354],{"class":97},[87,989,990],{"class":971},"0",[87,992,385],{"class":97},[87,994,972],{"class":971},[87,996,385],{"class":97},[87,998,972],{"class":971},[87,1000,385],{"class":97},[87,1002,1003],{"class":971}," 0.4",[87,1005,1006],{"class":97},");\n",[87,1008,1010,1013,1015,1018],{"class":89,"line":1009},39,[87,1011,1012],{"class":952},"  display",[87,1014,158],{"class":97},[87,1016,1017],{"class":101}," flex",[87,1019,121],{"class":97},[87,1021,1023,1026,1028,1031],{"class":89,"line":1022},40,[87,1024,1025],{"class":952},"  align-items",[87,1027,158],{"class":97},[87,1029,1030],{"class":101}," center",[87,1032,121],{"class":97},[87,1034,1036,1039,1041,1043],{"class":89,"line":1035},41,[87,1037,1038],{"class":952},"  justify-content",[87,1040,158],{"class":97},[87,1042,1030],{"class":101},[87,1044,121],{"class":97},[87,1046,1048,1051,1053,1056],{"class":89,"line":1047},42,[87,1049,1050],{"class":952},"  z-index",[87,1052,158],{"class":97},[87,1054,1055],{"class":971}," 1000",[87,1057,121],{"class":97},[87,1059,1061],{"class":89,"line":1060},43,[87,1062,1063],{"class":97},"}\n",[87,1065,1067,1069,1071],{"class":89,"line":1066},44,[87,1068,373],{"class":97},[87,1070,715],{"class":141},[87,1072,148],{"class":97},[87,1074,1076,1078,1080,1083,1086],{"class":89,"line":1075},45,[87,1077,980],{"class":952},[87,1079,158],{"class":97},[87,1081,1082],{"class":97}," #",[87,1084,1085],{"class":101},"fff",[87,1087,121],{"class":97},[87,1089,1091,1094,1096,1099],{"class":89,"line":1090},46,[87,1092,1093],{"class":952},"  border-radius",[87,1095,158],{"class":97},[87,1097,1098],{"class":971}," 8px",[87,1100,121],{"class":97},[87,1102,1104,1107,1109,1111,1114,1117,1119,1121,1123,1125,1127,1129,1131,1133,1136],{"class":89,"line":1103},47,[87,1105,1106],{"class":952},"  box-shadow",[87,1108,158],{"class":97},[87,1110,972],{"class":971},[87,1112,1113],{"class":971}," 2px",[87,1115,1116],{"class":971}," 16px",[87,1118,985],{"class":273},[87,1120,354],{"class":97},[87,1122,990],{"class":971},[87,1124,385],{"class":97},[87,1126,972],{"class":971},[87,1128,385],{"class":97},[87,1130,972],{"class":971},[87,1132,385],{"class":97},[87,1134,1135],{"class":971}," 0.2",[87,1137,1006],{"class":97},[87,1139,1141,1144,1146,1149],{"class":89,"line":1140},48,[87,1142,1143],{"class":952},"  padding",[87,1145,158],{"class":97},[87,1147,1148],{"class":971}," 2rem",[87,1150,121],{"class":97},[87,1152,1154,1157,1159,1162],{"class":89,"line":1153},49,[87,1155,1156],{"class":952},"  min-width",[87,1158,158],{"class":97},[87,1160,1161],{"class":971}," 320px",[87,1163,121],{"class":97},[87,1165,1167,1170,1172,1175],{"class":89,"line":1166},50,[87,1168,1169],{"class":952},"  max-width",[87,1171,158],{"class":97},[87,1173,1174],{"class":971}," 90vw",[87,1176,121],{"class":97},[87,1178,1180],{"class":89,"line":1179},51,[87,1181,1063],{"class":97},[87,1183,1185,1187,1189],{"class":89,"line":1184},52,[87,1186,373],{"class":97},[87,1188,781],{"class":141},[87,1190,148],{"class":97},[87,1192,1194,1196,1198,1200],{"class":89,"line":1193},53,[87,1195,1012],{"class":952},[87,1197,158],{"class":97},[87,1199,1017],{"class":101},[87,1201,121],{"class":97},[87,1203,1205,1208,1210,1213],{"class":89,"line":1204},54,[87,1206,1207],{"class":952},"  gap",[87,1209,158],{"class":97},[87,1211,1212],{"class":971}," 1rem",[87,1214,121],{"class":97},[87,1216,1218,1221,1223,1225],{"class":89,"line":1217},55,[87,1219,1220],{"class":952},"  margin-top",[87,1222,158],{"class":97},[87,1224,1148],{"class":971},[87,1226,121],{"class":97},[87,1228,1230,1232,1234,1237],{"class":89,"line":1229},56,[87,1231,1038],{"class":952},[87,1233,158],{"class":97},[87,1235,1236],{"class":101}," flex-end",[87,1238,121],{"class":97},[87,1240,1242],{"class":89,"line":1241},57,[87,1243,1063],{"class":97},[87,1245,1247,1249,1251],{"class":89,"line":1246},58,[87,1248,373],{"class":97},[87,1250,802],{"class":141},[87,1252,148],{"class":97},[87,1254,1256,1258,1260,1263,1266],{"class":89,"line":1255},59,[87,1257,1143],{"class":952},[87,1259,158],{"class":97},[87,1261,1262],{"class":971}," 0.5rem",[87,1264,1265],{"class":971}," 1.5rem",[87,1267,121],{"class":97},[87,1269,1271,1273,1275,1278],{"class":89,"line":1270},60,[87,1272,1093],{"class":952},[87,1274,158],{"class":97},[87,1276,1277],{"class":971}," 4px",[87,1279,121],{"class":97},[87,1281,1283,1286,1288,1291],{"class":89,"line":1282},61,[87,1284,1285],{"class":952},"  border",[87,1287,158],{"class":97},[87,1289,1290],{"class":101}," none",[87,1292,121],{"class":97},[87,1294,1296,1298,1300,1302,1305],{"class":89,"line":1295},62,[87,1297,980],{"class":952},[87,1299,158],{"class":97},[87,1301,1082],{"class":97},[87,1303,1304],{"class":101},"eee",[87,1306,121],{"class":97},[87,1308,1310,1313,1315,1318],{"class":89,"line":1309},63,[87,1311,1312],{"class":952},"  cursor",[87,1314,158],{"class":97},[87,1316,1317],{"class":101}," pointer",[87,1319,121],{"class":97},[87,1321,1323,1326,1328,1330],{"class":89,"line":1322},64,[87,1324,1325],{"class":952},"  font-size",[87,1327,158],{"class":97},[87,1329,1212],{"class":971},[87,1331,121],{"class":97},[87,1333,1335],{"class":89,"line":1334},65,[87,1336,1063],{"class":97},[87,1338,1340,1342,1345],{"class":89,"line":1339},66,[87,1341,373],{"class":97},[87,1343,1344],{"class":141},"dialog-btn-primary",[87,1346,148],{"class":97},[87,1348,1350,1352,1354,1356,1359],{"class":89,"line":1349},67,[87,1351,980],{"class":952},[87,1353,158],{"class":97},[87,1355,1082],{"class":97},[87,1357,1358],{"class":101},"007bff",[87,1360,121],{"class":97},[87,1362,1364,1367,1369,1371,1373],{"class":89,"line":1363},68,[87,1365,1366],{"class":952},"  color",[87,1368,158],{"class":97},[87,1370,1082],{"class":97},[87,1372,1085],{"class":101},[87,1374,121],{"class":97},[87,1376,1378],{"class":89,"line":1377},69,[87,1379,1063],{"class":97},[87,1381,1383,1385,1387],{"class":89,"line":1382},70,[87,1384,648],{"class":97},[87,1386,932],{"class":154},[87,1388,484],{"class":97},[78,1390,1393],{"className":456,"code":1391,"filename":1392,"language":115,"meta":83,"style":83},"\u003Cscript setup lang=\"ts\">\n  import AlertDialog from \"@\u002Fcomponents\u002FAlertDialog.vue\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- Rest of your app -->\n  \u003CAlertDialog \u002F>\n\u003C\u002Ftemplate>\n","app.vue",[29,1394,1395,1415,1435,1443,1447,1455,1461,1471],{"__ignoreMap":83},[87,1396,1397,1399,1401,1403,1405,1407,1409,1411,1413],{"class":89,"line":90},[87,1398,276],{"class":97},[87,1400,467],{"class":154},[87,1402,470],{"class":137},[87,1404,473],{"class":137},[87,1406,270],{"class":97},[87,1408,118],{"class":97},[87,1410,82],{"class":114},[87,1412,118],{"class":97},[87,1414,484],{"class":97},[87,1416,1417,1420,1423,1426,1428,1431,1433],{"class":89,"line":124},[87,1418,1419],{"class":93},"  import",[87,1421,1422],{"class":101}," AlertDialog ",[87,1424,1425],{"class":93},"from",[87,1427,111],{"class":97},[87,1429,1430],{"class":114},"@\u002Fcomponents\u002FAlertDialog.vue",[87,1432,118],{"class":97},[87,1434,121],{"class":97},[87,1436,1437,1439,1441],{"class":89,"line":131},[87,1438,648],{"class":97},[87,1440,467],{"class":154},[87,1442,484],{"class":97},[87,1444,1445],{"class":89,"line":151},[87,1446,128],{"emptyLinePlaceholder":127},[87,1448,1449,1451,1453],{"class":89,"line":163},[87,1450,276],{"class":97},[87,1452,663],{"class":154},[87,1454,484],{"class":97},[87,1456,1457],{"class":89,"line":177},[87,1458,1460],{"class":1459},"sHwdD","  \u003C!-- Rest of your app -->\n",[87,1462,1463,1465,1468],{"class":89,"line":189},[87,1464,670],{"class":97},[87,1466,1467],{"class":154},"AlertDialog",[87,1469,1470],{"class":97}," \u002F>\n",[87,1472,1473,1475,1477],{"class":89,"line":201},[87,1474,648],{"class":97},[87,1476,663],{"class":154},[87,1478,484],{"class":97},[78,1480,1483],{"className":456,"code":1481,"filename":1482,"language":115,"meta":83,"style":83},"\u003Cscript setup lang=\"ts\">\nimport { useAlert } from \"@\u002Fcomposables\u002FuseAlert\";\n\nconst { show } = useAlert();\n\nconst handleDelete = async () => {\n  const result = await show({\n    title: \"Confirm Deletion\",\n    message: \"Are you sure you want to delete this item?\",\n    confirmText: \"Delete\",\n    cancelText: \"Cancel\",\n  });\n  if (result) {\n    \u002F\u002F Perform deletion\n  }\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"handleDelete\">Delete Item\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","components\u002FSomeComponent.vue",[29,1484,1485,1505,1525,1529,1547,1551,1569,1589,1605,1620,1635,1650,1658,1673,1678,1683,1687,1695,1699,1707,1735],{"__ignoreMap":83},[87,1486,1487,1489,1491,1493,1495,1497,1499,1501,1503],{"class":89,"line":90},[87,1488,276],{"class":97},[87,1490,467],{"class":154},[87,1492,470],{"class":137},[87,1494,473],{"class":137},[87,1496,270],{"class":97},[87,1498,118],{"class":97},[87,1500,82],{"class":114},[87,1502,118],{"class":97},[87,1504,484],{"class":97},[87,1506,1507,1509,1511,1513,1515,1517,1519,1521,1523],{"class":89,"line":124},[87,1508,94],{"class":93},[87,1510,98],{"class":97},[87,1512,493],{"class":101},[87,1514,105],{"class":97},[87,1516,108],{"class":93},[87,1518,111],{"class":97},[87,1520,502],{"class":114},[87,1522,118],{"class":97},[87,1524,121],{"class":97},[87,1526,1527],{"class":89,"line":131},[87,1528,128],{"emptyLinePlaceholder":127},[87,1530,1531,1533,1535,1537,1539,1541,1543,1545],{"class":89,"line":151},[87,1532,264],{"class":137},[87,1534,98],{"class":97},[87,1536,300],{"class":101},[87,1538,521],{"class":97},[87,1540,145],{"class":97},[87,1542,493],{"class":273},[87,1544,285],{"class":101},[87,1546,121],{"class":97},[87,1548,1549],{"class":89,"line":163},[87,1550,128],{"emptyLinePlaceholder":127},[87,1552,1553,1555,1558,1560,1563,1565,1567],{"class":89,"line":177},[87,1554,264],{"class":137},[87,1556,1557],{"class":101}," handleDelete ",[87,1559,270],{"class":97},[87,1561,1562],{"class":137}," async",[87,1564,427],{"class":97},[87,1566,242],{"class":137},[87,1568,148],{"class":97},[87,1570,1571,1574,1577,1579,1582,1584,1586],{"class":89,"line":189},[87,1572,1573],{"class":137},"  const",[87,1575,1576],{"class":101}," result",[87,1578,145],{"class":97},[87,1580,1581],{"class":93}," await",[87,1583,446],{"class":273},[87,1585,354],{"class":154},[87,1587,1588],{"class":97},"{\n",[87,1590,1591,1593,1595,1597,1600,1602],{"class":89,"line":201},[87,1592,166],{"class":154},[87,1594,158],{"class":97},[87,1596,111],{"class":97},[87,1598,1599],{"class":114},"Confirm Deletion",[87,1601,118],{"class":97},[87,1603,1604],{"class":97},",\n",[87,1606,1607,1609,1611,1613,1616,1618],{"class":89,"line":213},[87,1608,180],{"class":154},[87,1610,158],{"class":97},[87,1612,111],{"class":97},[87,1614,1615],{"class":114},"Are you sure you want to delete this item?",[87,1617,118],{"class":97},[87,1619,1604],{"class":97},[87,1621,1622,1624,1626,1628,1631,1633],{"class":89,"line":219},[87,1623,192],{"class":154},[87,1625,158],{"class":97},[87,1627,111],{"class":97},[87,1629,1630],{"class":114},"Delete",[87,1632,118],{"class":97},[87,1634,1604],{"class":97},[87,1636,1637,1639,1641,1643,1646,1648],{"class":89,"line":250},[87,1638,204],{"class":154},[87,1640,158],{"class":97},[87,1642,111],{"class":97},[87,1644,1645],{"class":114},"Cancel",[87,1647,118],{"class":97},[87,1649,1604],{"class":97},[87,1651,1652,1654,1656],{"class":89,"line":256},[87,1653,397],{"class":97},[87,1655,239],{"class":154},[87,1657,121],{"class":97},[87,1659,1660,1663,1665,1668,1671],{"class":89,"line":261},[87,1661,1662],{"class":93},"  if",[87,1664,227],{"class":154},[87,1666,1667],{"class":101},"result",[87,1669,1670],{"class":154},") ",[87,1672,1588],{"class":97},[87,1674,1675],{"class":89,"line":290},[87,1676,1677],{"class":1459},"    \u002F\u002F Perform deletion\n",[87,1679,1680],{"class":89,"line":295},[87,1681,1682],{"class":97},"  }\n",[87,1684,1685],{"class":89,"line":343},[87,1686,253],{"class":97},[87,1688,1689,1691,1693],{"class":89,"line":367},[87,1690,648],{"class":97},[87,1692,467],{"class":154},[87,1694,484],{"class":97},[87,1696,1697],{"class":89,"line":394},[87,1698,128],{"emptyLinePlaceholder":127},[87,1700,1701,1703,1705],{"class":89,"line":404},[87,1702,276],{"class":97},[87,1704,663],{"class":154},[87,1706,484],{"class":97},[87,1708,1709,1711,1713,1715,1717,1719,1722,1724,1726,1729,1731,1733],{"class":89,"line":409},[87,1710,670],{"class":97},[87,1712,793],{"class":154},[87,1714,807],{"class":137},[87,1716,270],{"class":97},[87,1718,118],{"class":97},[87,1720,1721],{"class":114},"handleDelete",[87,1723,118],{"class":97},[87,1725,282],{"class":97},[87,1727,1728],{"class":101},"Delete Item",[87,1730,648],{"class":97},[87,1732,793],{"class":154},[87,1734,484],{"class":97},[87,1736,1737,1739,1741],{"class":89,"line":414},[87,1738,648],{"class":97},[87,1740,663],{"class":154},[87,1742,484],{"class":97},[70,1744,1746],{"label":1745},"React",[74,1747,1749,1964,2108,2814,3180,3266],{"default-value":1748},"context\u002Falert.tsx",[78,1750,1754],{"className":1751,"code":1752,"filename":1748,"language":1753,"meta":83,"style":83},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createContext } from \"react\";\n\nexport type AlertDialogProps = {\n  data: {\n    title: string;\n    message: string;\n    confirmText?: string;\n    cancelText?: string;\n  };\n  resolve: (result: boolean) => void;\n};\n\nexport const AlertContext = createContext\u003C{\n  show: (data: AlertDialogProps[\"data\"]) => Promise\u003Cboolean>;\n}>({\n  show: async () => false,\n});\n","tsx",[29,1755,1756,1778,1782,1794,1802,1812,1822,1832,1842,1846,1868,1872,1876,1892,1930,1939,1956],{"__ignoreMap":83},[87,1757,1758,1760,1762,1765,1767,1769,1771,1774,1776],{"class":89,"line":90},[87,1759,94],{"class":93},[87,1761,98],{"class":97},[87,1763,1764],{"class":101}," createContext",[87,1766,105],{"class":97},[87,1768,108],{"class":93},[87,1770,111],{"class":97},[87,1772,1773],{"class":114},"react",[87,1775,118],{"class":97},[87,1777,121],{"class":97},[87,1779,1780],{"class":89,"line":124},[87,1781,128],{"emptyLinePlaceholder":127},[87,1783,1784,1786,1788,1790,1792],{"class":89,"line":131},[87,1785,134],{"class":93},[87,1787,138],{"class":137},[87,1789,142],{"class":141},[87,1791,145],{"class":97},[87,1793,148],{"class":97},[87,1795,1796,1798,1800],{"class":89,"line":151},[87,1797,155],{"class":154},[87,1799,158],{"class":97},[87,1801,148],{"class":97},[87,1803,1804,1806,1808,1810],{"class":89,"line":163},[87,1805,166],{"class":154},[87,1807,158],{"class":97},[87,1809,172],{"class":141},[87,1811,121],{"class":97},[87,1813,1814,1816,1818,1820],{"class":89,"line":177},[87,1815,180],{"class":154},[87,1817,158],{"class":97},[87,1819,172],{"class":141},[87,1821,121],{"class":97},[87,1823,1824,1826,1828,1830],{"class":89,"line":189},[87,1825,192],{"class":154},[87,1827,169],{"class":97},[87,1829,172],{"class":141},[87,1831,121],{"class":97},[87,1833,1834,1836,1838,1840],{"class":89,"line":201},[87,1835,204],{"class":154},[87,1837,169],{"class":97},[87,1839,172],{"class":141},[87,1841,121],{"class":97},[87,1843,1844],{"class":89,"line":213},[87,1845,216],{"class":97},[87,1847,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866],{"class":89,"line":219},[87,1849,222],{"class":154},[87,1851,158],{"class":97},[87,1853,227],{"class":97},[87,1855,1667],{"class":230},[87,1857,158],{"class":97},[87,1859,236],{"class":141},[87,1861,239],{"class":97},[87,1863,242],{"class":137},[87,1865,245],{"class":141},[87,1867,121],{"class":97},[87,1869,1870],{"class":89,"line":250},[87,1871,253],{"class":97},[87,1873,1874],{"class":89,"line":256},[87,1875,128],{"emptyLinePlaceholder":127},[87,1877,1878,1880,1882,1885,1887,1889],{"class":89,"line":261},[87,1879,134],{"class":93},[87,1881,419],{"class":137},[87,1883,1884],{"class":101}," AlertContext ",[87,1886,270],{"class":97},[87,1888,1764],{"class":273},[87,1890,1891],{"class":97},"\u003C{\n",[87,1893,1894,1897,1899,1901,1903,1905,1907,1909,1911,1913,1915,1917,1919,1921,1923,1925,1927],{"class":89,"line":290},[87,1895,1896],{"class":154},"  show",[87,1898,158],{"class":97},[87,1900,227],{"class":97},[87,1902,307],{"class":230},[87,1904,158],{"class":97},[87,1906,142],{"class":141},[87,1908,314],{"class":101},[87,1910,118],{"class":97},[87,1912,307],{"class":114},[87,1914,118],{"class":97},[87,1916,323],{"class":101},[87,1918,239],{"class":97},[87,1920,242],{"class":137},[87,1922,329],{"class":141},[87,1924,276],{"class":97},[87,1926,334],{"class":141},[87,1928,1929],{"class":97},">;\n",[87,1931,1932,1935,1937],{"class":89,"line":295},[87,1933,1934],{"class":97},"}>",[87,1936,354],{"class":101},[87,1938,1588],{"class":97},[87,1940,1941,1943,1945,1947,1949,1951,1954],{"class":89,"line":343},[87,1942,1896],{"class":273},[87,1944,158],{"class":97},[87,1946,1562],{"class":137},[87,1948,427],{"class":97},[87,1950,242],{"class":137},[87,1952,1953],{"class":567}," false",[87,1955,1604],{"class":97},[87,1957,1958,1960,1962],{"class":89,"line":367},[87,1959,521],{"class":97},[87,1961,239],{"class":101},[87,1963,121],{"class":97},[78,1965,1968],{"className":80,"code":1966,"filename":1967,"language":82,"meta":83,"style":83},"import { AlertContext } from \"@\u002Fcontext\u002Falert\";\nimport { useContext } from \"react\";\n\nexport const useAlert = () => {\n  const ctx = useContext(AlertContext);\n  if (!ctx) {\n    throw new Error(\"useAlert must be used within an AlertProvider\");\n  }\n  return ctx;\n};\n","hooks\u002FuseAlert.ts",[29,1969,1970,1992,2013,2017,2033,2053,2069,2092,2096,2104],{"__ignoreMap":83},[87,1971,1972,1974,1976,1979,1981,1983,1985,1988,1990],{"class":89,"line":90},[87,1973,94],{"class":93},[87,1975,98],{"class":97},[87,1977,1978],{"class":101}," AlertContext",[87,1980,105],{"class":97},[87,1982,108],{"class":93},[87,1984,111],{"class":97},[87,1986,1987],{"class":114},"@\u002Fcontext\u002Falert",[87,1989,118],{"class":97},[87,1991,121],{"class":97},[87,1993,1994,1996,1998,2001,2003,2005,2007,2009,2011],{"class":89,"line":124},[87,1995,94],{"class":93},[87,1997,98],{"class":97},[87,1999,2000],{"class":101}," useContext",[87,2002,105],{"class":97},[87,2004,108],{"class":93},[87,2006,111],{"class":97},[87,2008,1773],{"class":114},[87,2010,118],{"class":97},[87,2012,121],{"class":97},[87,2014,2015],{"class":89,"line":131},[87,2016,128],{"emptyLinePlaceholder":127},[87,2018,2019,2021,2023,2025,2027,2029,2031],{"class":89,"line":151},[87,2020,134],{"class":93},[87,2022,419],{"class":137},[87,2024,422],{"class":101},[87,2026,270],{"class":97},[87,2028,427],{"class":97},[87,2030,242],{"class":137},[87,2032,148],{"class":97},[87,2034,2035,2037,2040,2042,2044,2046,2049,2051],{"class":89,"line":163},[87,2036,1573],{"class":137},[87,2038,2039],{"class":101}," ctx",[87,2041,145],{"class":97},[87,2043,2000],{"class":273},[87,2045,354],{"class":154},[87,2047,2048],{"class":101},"AlertContext",[87,2050,239],{"class":154},[87,2052,121],{"class":97},[87,2054,2055,2057,2059,2062,2065,2067],{"class":89,"line":177},[87,2056,1662],{"class":93},[87,2058,227],{"class":154},[87,2060,2061],{"class":97},"!",[87,2063,2064],{"class":101},"ctx",[87,2066,1670],{"class":154},[87,2068,1588],{"class":97},[87,2070,2071,2074,2076,2079,2081,2083,2086,2088,2090],{"class":89,"line":189},[87,2072,2073],{"class":93},"    throw",[87,2075,349],{"class":97},[87,2077,2078],{"class":273}," Error",[87,2080,354],{"class":154},[87,2082,118],{"class":97},[87,2084,2085],{"class":114},"useAlert must be used within an AlertProvider",[87,2087,118],{"class":97},[87,2089,239],{"class":154},[87,2091,121],{"class":97},[87,2093,2094],{"class":89,"line":201},[87,2095,1682],{"class":97},[87,2097,2098,2100,2102],{"class":89,"line":213},[87,2099,346],{"class":93},[87,2101,2039],{"class":101},[87,2103,121],{"class":97},[87,2105,2106],{"class":89,"line":219},[87,2107,253],{"class":97},[78,2109,2112],{"className":1751,"code":2110,"filename":2111,"language":1753,"meta":83,"style":83},"import { AlertContext, type AlertDialogProps } from \"@\u002Fcontext\u002Falert\";\nimport { useState } from \"react\";\nimport \".\u002FAlertDialog.css\";\n\nexport const AlertProvider = ({ children }: { children: React.ReactNode }) => {\n  const [current, setCurrent] = useState\u003CAlertDialogProps | null>(null);\n\n  const show = (data: AlertDialogProps[\"data\"]) => {\n    return new Promise\u003Cboolean>((resolve) => {\n      setCurrent({ data, resolve });\n    });\n  };\n\n  const handleCancel = () => {\n    current?.resolve(false);\n    setCurrent(null);\n  };\n\n  const handleConfirm = () => {\n    current?.resolve(true);\n    setCurrent(null);\n  };\n\n  return (\n    \u003CAlertContext.Provider value={{ show }}>\n      {children}\n      {current && (\n        \u003Cdiv className=\"dialog-backdrop\">\n          \u003Cdiv className=\"dialog\">\n            {current.data.title && \u003Ch3>{current.data.title}\u003C\u002Fh3>}\n            \u003Cp>{current.data.message}\u003C\u002Fp>\n            \u003Cdiv className=\"dialog-actions\">\n              \u003Cbutton className=\"dialog-btn\" onClick={handleCancel}>\n                {current.data.cancelText || \"Cancel\"}\n              \u003C\u002Fbutton>\n              \u003Cbutton className=\"dialog-btn dialog-btn-primary\" onClick={handleConfirm}>\n                {current.data.confirmText || \"OK\"}\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      )}\n    \u003C\u002FAlertContext.Provider>\n  );\n};\n","providers\u002FAlertProvider.tsx",[29,2113,2114,2140,2161,2174,2178,2219,2261,2265,2297,2324,2346,2355,2359,2363,2378,2394,2407,2411,2415,2430,2446,2458,2462,2466,2473,2491,2501,2513,2532,2551,2596,2622,2640,2668,2695,2704,2728,2754,2762,2771,2780,2788,2795,2803,2810],{"__ignoreMap":83},[87,2115,2116,2118,2120,2122,2124,2126,2128,2130,2132,2134,2136,2138],{"class":89,"line":90},[87,2117,94],{"class":93},[87,2119,98],{"class":97},[87,2121,1978],{"class":101},[87,2123,385],{"class":97},[87,2125,138],{"class":93},[87,2127,142],{"class":101},[87,2129,105],{"class":97},[87,2131,108],{"class":93},[87,2133,111],{"class":97},[87,2135,1987],{"class":114},[87,2137,118],{"class":97},[87,2139,121],{"class":97},[87,2141,2142,2144,2146,2149,2151,2153,2155,2157,2159],{"class":89,"line":124},[87,2143,94],{"class":93},[87,2145,98],{"class":97},[87,2147,2148],{"class":101}," useState",[87,2150,105],{"class":97},[87,2152,108],{"class":93},[87,2154,111],{"class":97},[87,2156,1773],{"class":114},[87,2158,118],{"class":97},[87,2160,121],{"class":97},[87,2162,2163,2165,2167,2170,2172],{"class":89,"line":131},[87,2164,94],{"class":93},[87,2166,111],{"class":97},[87,2168,2169],{"class":114},".\u002FAlertDialog.css",[87,2171,118],{"class":97},[87,2173,121],{"class":97},[87,2175,2176],{"class":89,"line":151},[87,2177,128],{"emptyLinePlaceholder":127},[87,2179,2180,2182,2184,2187,2189,2192,2195,2198,2200,2202,2204,2207,2209,2212,2215,2217],{"class":89,"line":163},[87,2181,134],{"class":93},[87,2183,419],{"class":137},[87,2185,2186],{"class":101}," AlertProvider ",[87,2188,270],{"class":97},[87,2190,2191],{"class":97}," ({",[87,2193,2194],{"class":230}," children",[87,2196,2197],{"class":97}," }:",[87,2199,98],{"class":97},[87,2201,2194],{"class":154},[87,2203,158],{"class":97},[87,2205,2206],{"class":141}," React",[87,2208,373],{"class":97},[87,2210,2211],{"class":141},"ReactNode",[87,2213,2214],{"class":97}," })",[87,2216,242],{"class":137},[87,2218,148],{"class":97},[87,2220,2221,2223,2226,2229,2231,2234,2236,2238,2240,2242,2244,2247,2250,2252,2254,2257,2259],{"class":89,"line":177},[87,2222,1573],{"class":137},[87,2224,2225],{"class":97}," [",[87,2227,2228],{"class":101},"current",[87,2230,385],{"class":97},[87,2232,2233],{"class":101}," setCurrent",[87,2235,323],{"class":97},[87,2237,145],{"class":97},[87,2239,2148],{"class":273},[87,2241,276],{"class":97},[87,2243,279],{"class":141},[87,2245,2246],{"class":97}," |",[87,2248,2249],{"class":141}," null",[87,2251,282],{"class":97},[87,2253,354],{"class":154},[87,2255,2256],{"class":97},"null",[87,2258,239],{"class":154},[87,2260,121],{"class":97},[87,2262,2263],{"class":89,"line":189},[87,2264,128],{"emptyLinePlaceholder":127},[87,2266,2267,2269,2271,2273,2275,2277,2279,2281,2283,2285,2287,2289,2291,2293,2295],{"class":89,"line":201},[87,2268,1573],{"class":137},[87,2270,446],{"class":101},[87,2272,145],{"class":97},[87,2274,227],{"class":97},[87,2276,307],{"class":230},[87,2278,158],{"class":97},[87,2280,142],{"class":141},[87,2282,314],{"class":154},[87,2284,118],{"class":97},[87,2286,307],{"class":114},[87,2288,118],{"class":97},[87,2290,323],{"class":154},[87,2292,239],{"class":97},[87,2294,242],{"class":137},[87,2296,148],{"class":97},[87,2298,2299,2302,2304,2306,2308,2310,2312,2314,2316,2318,2320,2322],{"class":89,"line":213},[87,2300,2301],{"class":93},"    return",[87,2303,349],{"class":97},[87,2305,329],{"class":141},[87,2307,276],{"class":97},[87,2309,334],{"class":141},[87,2311,282],{"class":97},[87,2313,354],{"class":154},[87,2315,354],{"class":97},[87,2317,54],{"class":230},[87,2319,239],{"class":97},[87,2321,242],{"class":137},[87,2323,148],{"class":97},[87,2325,2326,2329,2331,2334,2336,2338,2340,2342,2344],{"class":89,"line":219},[87,2327,2328],{"class":273},"      setCurrent",[87,2330,354],{"class":154},[87,2332,2333],{"class":97},"{",[87,2335,382],{"class":101},[87,2337,385],{"class":97},[87,2339,388],{"class":101},[87,2341,105],{"class":97},[87,2343,239],{"class":154},[87,2345,121],{"class":97},[87,2347,2348,2351,2353],{"class":89,"line":250},[87,2349,2350],{"class":97},"    }",[87,2352,239],{"class":154},[87,2354,121],{"class":97},[87,2356,2357],{"class":89,"line":256},[87,2358,216],{"class":97},[87,2360,2361],{"class":89,"line":261},[87,2362,128],{"emptyLinePlaceholder":127},[87,2364,2365,2367,2370,2372,2374,2376],{"class":89,"line":290},[87,2366,1573],{"class":137},[87,2368,2369],{"class":101}," handleCancel",[87,2371,145],{"class":97},[87,2373,427],{"class":97},[87,2375,242],{"class":137},[87,2377,148],{"class":97},[87,2379,2380,2382,2384,2386,2388,2390,2392],{"class":89,"line":295},[87,2381,370],{"class":101},[87,2383,560],{"class":97},[87,2385,54],{"class":273},[87,2387,354],{"class":154},[87,2389,47],{"class":567},[87,2391,239],{"class":154},[87,2393,121],{"class":97},[87,2395,2396,2399,2401,2403,2405],{"class":89,"line":343},[87,2397,2398],{"class":273},"    setCurrent",[87,2400,354],{"class":154},[87,2402,2256],{"class":97},[87,2404,239],{"class":154},[87,2406,121],{"class":97},[87,2408,2409],{"class":89,"line":367},[87,2410,216],{"class":97},[87,2412,2413],{"class":89,"line":394},[87,2414,128],{"emptyLinePlaceholder":127},[87,2416,2417,2419,2422,2424,2426,2428],{"class":89,"line":404},[87,2418,1573],{"class":137},[87,2420,2421],{"class":101}," handleConfirm",[87,2423,145],{"class":97},[87,2425,427],{"class":97},[87,2427,242],{"class":137},[87,2429,148],{"class":97},[87,2431,2432,2434,2436,2438,2440,2442,2444],{"class":89,"line":409},[87,2433,370],{"class":101},[87,2435,560],{"class":97},[87,2437,54],{"class":273},[87,2439,354],{"class":154},[87,2441,43],{"class":567},[87,2443,239],{"class":154},[87,2445,121],{"class":97},[87,2447,2448,2450,2452,2454,2456],{"class":89,"line":414},[87,2449,2398],{"class":273},[87,2451,354],{"class":154},[87,2453,2256],{"class":97},[87,2455,239],{"class":154},[87,2457,121],{"class":97},[87,2459,2460],{"class":89,"line":434},[87,2461,216],{"class":97},[87,2463,2464],{"class":89,"line":451},[87,2465,128],{"emptyLinePlaceholder":127},[87,2467,2468,2470],{"class":89,"line":821},[87,2469,346],{"class":93},[87,2471,2472],{"class":154}," (\n",[87,2474,2475,2477,2480,2483,2486,2488],{"class":89,"line":827},[87,2476,704],{"class":97},[87,2478,2479],{"class":141},"AlertContext.Provider",[87,2481,2482],{"class":137}," value",[87,2484,2485],{"class":97},"={{",[87,2487,300],{"class":101},[87,2489,2490],{"class":97},"}}>\n",[87,2492,2493,2496,2499],{"class":89,"line":837},[87,2494,2495],{"class":97},"      {",[87,2497,2498],{"class":101},"children",[87,2500,1063],{"class":97},[87,2502,2503,2505,2508,2511],{"class":89,"line":868},[87,2504,2495],{"class":97},[87,2506,2507],{"class":101},"current ",[87,2509,2510],{"class":97},"&&",[87,2512,2472],{"class":101},[87,2514,2515,2517,2519,2522,2524,2526,2528,2530],{"class":89,"line":874},[87,2516,790],{"class":97},[87,2518,673],{"class":154},[87,2520,2521],{"class":137}," className",[87,2523,270],{"class":97},[87,2525,118],{"class":97},[87,2527,695],{"class":114},[87,2529,118],{"class":97},[87,2531,484],{"class":97},[87,2533,2534,2537,2539,2541,2543,2545,2547,2549],{"class":89,"line":883},[87,2535,2536],{"class":97},"          \u003C",[87,2538,673],{"class":154},[87,2540,2521],{"class":137},[87,2542,270],{"class":97},[87,2544,118],{"class":97},[87,2546,715],{"class":114},[87,2548,118],{"class":97},[87,2550,484],{"class":97},[87,2552,2553,2556,2558,2560,2562,2564,2567,2569,2572,2574,2577,2579,2581,2583,2585,2588,2591,2593],{"class":89,"line":893},[87,2554,2555],{"class":97},"            {",[87,2557,2228],{"class":101},[87,2559,373],{"class":97},[87,2561,307],{"class":101},[87,2563,373],{"class":97},[87,2565,2566],{"class":101},"title ",[87,2568,2510],{"class":97},[87,2570,2571],{"class":97}," \u003C",[87,2573,727],{"class":154},[87,2575,2576],{"class":97},">{",[87,2578,2228],{"class":101},[87,2580,373],{"class":97},[87,2582,307],{"class":101},[87,2584,373],{"class":97},[87,2586,2587],{"class":101},"title",[87,2589,2590],{"class":97},"}\u003C\u002F",[87,2592,727],{"class":154},[87,2594,2595],{"class":97},">}\n",[87,2597,2598,2601,2603,2605,2607,2609,2611,2613,2616,2618,2620],{"class":89,"line":903},[87,2599,2600],{"class":97},"            \u003C",[87,2602,10],{"class":154},[87,2604,2576],{"class":97},[87,2606,2228],{"class":101},[87,2608,373],{"class":97},[87,2610,307],{"class":101},[87,2612,373],{"class":97},[87,2614,2615],{"class":101},"message",[87,2617,2590],{"class":97},[87,2619,10],{"class":154},[87,2621,484],{"class":97},[87,2623,2624,2626,2628,2630,2632,2634,2636,2638],{"class":89,"line":913},[87,2625,2600],{"class":97},[87,2627,673],{"class":154},[87,2629,2521],{"class":137},[87,2631,270],{"class":97},[87,2633,118],{"class":97},[87,2635,781],{"class":114},[87,2637,118],{"class":97},[87,2639,484],{"class":97},[87,2641,2642,2645,2647,2649,2651,2653,2655,2657,2660,2663,2665],{"class":89,"line":922},[87,2643,2644],{"class":97},"              \u003C",[87,2646,793],{"class":154},[87,2648,2521],{"class":137},[87,2650,270],{"class":97},[87,2652,118],{"class":97},[87,2654,802],{"class":114},[87,2656,118],{"class":97},[87,2658,2659],{"class":137}," onClick",[87,2661,2662],{"class":97},"={",[87,2664,814],{"class":101},[87,2666,2667],{"class":97},"}>\n",[87,2669,2670,2673,2675,2677,2679,2681,2684,2687,2689,2691,2693],{"class":89,"line":927},[87,2671,2672],{"class":97},"                {",[87,2674,2228],{"class":101},[87,2676,373],{"class":97},[87,2678,307],{"class":101},[87,2680,373],{"class":97},[87,2682,2683],{"class":101},"cancelText ",[87,2685,2686],{"class":97},"||",[87,2688,111],{"class":97},[87,2690,1645],{"class":114},[87,2692,118],{"class":97},[87,2694,1063],{"class":97},[87,2696,2697,2700,2702],{"class":89,"line":940},[87,2698,2699],{"class":97},"              \u003C\u002F",[87,2701,793],{"class":154},[87,2703,484],{"class":97},[87,2705,2706,2708,2710,2712,2714,2716,2718,2720,2722,2724,2726],{"class":89,"line":949},[87,2707,2644],{"class":97},[87,2709,793],{"class":154},[87,2711,2521],{"class":137},[87,2713,270],{"class":97},[87,2715,118],{"class":97},[87,2717,850],{"class":114},[87,2719,118],{"class":97},[87,2721,2659],{"class":137},[87,2723,2662],{"class":97},[87,2725,861],{"class":101},[87,2727,2667],{"class":97},[87,2729,2730,2732,2734,2736,2738,2740,2743,2745,2747,2750,2752],{"class":89,"line":963},[87,2731,2672],{"class":97},[87,2733,2228],{"class":101},[87,2735,373],{"class":97},[87,2737,307],{"class":101},[87,2739,373],{"class":97},[87,2741,2742],{"class":101},"confirmText ",[87,2744,2686],{"class":97},[87,2746,111],{"class":97},[87,2748,2749],{"class":114},"OK",[87,2751,118],{"class":97},[87,2753,1063],{"class":97},[87,2755,2756,2758,2760],{"class":89,"line":977},[87,2757,2699],{"class":97},[87,2759,793],{"class":154},[87,2761,484],{"class":97},[87,2763,2764,2767,2769],{"class":89,"line":1009},[87,2765,2766],{"class":97},"            \u003C\u002F",[87,2768,673],{"class":154},[87,2770,484],{"class":97},[87,2772,2773,2776,2778],{"class":89,"line":1022},[87,2774,2775],{"class":97},"          \u003C\u002F",[87,2777,673],{"class":154},[87,2779,484],{"class":97},[87,2781,2782,2784,2786],{"class":89,"line":1035},[87,2783,830],{"class":97},[87,2785,673],{"class":154},[87,2787,484],{"class":97},[87,2789,2790,2793],{"class":89,"line":1047},[87,2791,2792],{"class":101},"      )",[87,2794,1063],{"class":97},[87,2796,2797,2799,2801],{"class":89,"line":1060},[87,2798,896],{"class":97},[87,2800,2479],{"class":141},[87,2802,484],{"class":97},[87,2804,2805,2808],{"class":89,"line":1066},[87,2806,2807],{"class":154},"  )",[87,2809,121],{"class":97},[87,2811,2812],{"class":89,"line":1075},[87,2813,253],{"class":97},[78,2815,2820],{"className":2816,"code":2817,"filename":2818,"language":2819,"meta":83,"style":83},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".dialog-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n.dialog {\n  background: #fff;\n  border-radius: 8px;\n  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);\n  padding: 2rem;\n  min-width: 320px;\n  max-width: 90vw;\n}\n.dialog-actions {\n  display: flex;\n  gap: 1rem;\n  margin-top: 2rem;\n  justify-content: flex-end;\n}\n.dialog-btn {\n  padding: 0.5rem 1.5rem;\n  border-radius: 4px;\n  border: none;\n  background: #eee;\n  cursor: pointer;\n  font-size: 1rem;\n}\n.dialog-btn-primary {\n  background: #007bff;\n  color: #fff;\n}\n","providers\u002FAlertDialog.css","css",[29,2821,2822,2830,2840,2850,2876,2886,2896,2906,2916,2920,2928,2940,2950,2982,2992,3002,3012,3016,3024,3034,3044,3054,3064,3068,3076,3088,3098,3108,3120,3130,3140,3144,3152,3164,3176],{"__ignoreMap":83},[87,2823,2824,2826,2828],{"class":89,"line":90},[87,2825,373],{"class":97},[87,2827,695],{"class":141},[87,2829,148],{"class":97},[87,2831,2832,2834,2836,2838],{"class":89,"line":124},[87,2833,953],{"class":952},[87,2835,158],{"class":97},[87,2837,958],{"class":101},[87,2839,121],{"class":97},[87,2841,2842,2844,2846,2848],{"class":89,"line":131},[87,2843,966],{"class":952},[87,2845,158],{"class":97},[87,2847,972],{"class":971},[87,2849,121],{"class":97},[87,2851,2852,2854,2856,2858,2860,2862,2864,2866,2868,2870,2872,2874],{"class":89,"line":151},[87,2853,980],{"class":952},[87,2855,158],{"class":97},[87,2857,985],{"class":273},[87,2859,354],{"class":97},[87,2861,990],{"class":971},[87,2863,385],{"class":97},[87,2865,972],{"class":971},[87,2867,385],{"class":97},[87,2869,972],{"class":971},[87,2871,385],{"class":97},[87,2873,1003],{"class":971},[87,2875,1006],{"class":97},[87,2877,2878,2880,2882,2884],{"class":89,"line":163},[87,2879,1012],{"class":952},[87,2881,158],{"class":97},[87,2883,1017],{"class":101},[87,2885,121],{"class":97},[87,2887,2888,2890,2892,2894],{"class":89,"line":177},[87,2889,1025],{"class":952},[87,2891,158],{"class":97},[87,2893,1030],{"class":101},[87,2895,121],{"class":97},[87,2897,2898,2900,2902,2904],{"class":89,"line":189},[87,2899,1038],{"class":952},[87,2901,158],{"class":97},[87,2903,1030],{"class":101},[87,2905,121],{"class":97},[87,2907,2908,2910,2912,2914],{"class":89,"line":201},[87,2909,1050],{"class":952},[87,2911,158],{"class":97},[87,2913,1055],{"class":971},[87,2915,121],{"class":97},[87,2917,2918],{"class":89,"line":213},[87,2919,1063],{"class":97},[87,2921,2922,2924,2926],{"class":89,"line":219},[87,2923,373],{"class":97},[87,2925,715],{"class":141},[87,2927,148],{"class":97},[87,2929,2930,2932,2934,2936,2938],{"class":89,"line":250},[87,2931,980],{"class":952},[87,2933,158],{"class":97},[87,2935,1082],{"class":97},[87,2937,1085],{"class":101},[87,2939,121],{"class":97},[87,2941,2942,2944,2946,2948],{"class":89,"line":256},[87,2943,1093],{"class":952},[87,2945,158],{"class":97},[87,2947,1098],{"class":971},[87,2949,121],{"class":97},[87,2951,2952,2954,2956,2958,2960,2962,2964,2966,2968,2970,2972,2974,2976,2978,2980],{"class":89,"line":261},[87,2953,1106],{"class":952},[87,2955,158],{"class":97},[87,2957,972],{"class":971},[87,2959,1113],{"class":971},[87,2961,1116],{"class":971},[87,2963,985],{"class":273},[87,2965,354],{"class":97},[87,2967,990],{"class":971},[87,2969,385],{"class":97},[87,2971,972],{"class":971},[87,2973,385],{"class":97},[87,2975,972],{"class":971},[87,2977,385],{"class":97},[87,2979,1135],{"class":971},[87,2981,1006],{"class":97},[87,2983,2984,2986,2988,2990],{"class":89,"line":290},[87,2985,1143],{"class":952},[87,2987,158],{"class":97},[87,2989,1148],{"class":971},[87,2991,121],{"class":97},[87,2993,2994,2996,2998,3000],{"class":89,"line":295},[87,2995,1156],{"class":952},[87,2997,158],{"class":97},[87,2999,1161],{"class":971},[87,3001,121],{"class":97},[87,3003,3004,3006,3008,3010],{"class":89,"line":343},[87,3005,1169],{"class":952},[87,3007,158],{"class":97},[87,3009,1174],{"class":971},[87,3011,121],{"class":97},[87,3013,3014],{"class":89,"line":367},[87,3015,1063],{"class":97},[87,3017,3018,3020,3022],{"class":89,"line":394},[87,3019,373],{"class":97},[87,3021,781],{"class":141},[87,3023,148],{"class":97},[87,3025,3026,3028,3030,3032],{"class":89,"line":404},[87,3027,1012],{"class":952},[87,3029,158],{"class":97},[87,3031,1017],{"class":101},[87,3033,121],{"class":97},[87,3035,3036,3038,3040,3042],{"class":89,"line":409},[87,3037,1207],{"class":952},[87,3039,158],{"class":97},[87,3041,1212],{"class":971},[87,3043,121],{"class":97},[87,3045,3046,3048,3050,3052],{"class":89,"line":414},[87,3047,1220],{"class":952},[87,3049,158],{"class":97},[87,3051,1148],{"class":971},[87,3053,121],{"class":97},[87,3055,3056,3058,3060,3062],{"class":89,"line":434},[87,3057,1038],{"class":952},[87,3059,158],{"class":97},[87,3061,1236],{"class":101},[87,3063,121],{"class":97},[87,3065,3066],{"class":89,"line":451},[87,3067,1063],{"class":97},[87,3069,3070,3072,3074],{"class":89,"line":821},[87,3071,373],{"class":97},[87,3073,802],{"class":141},[87,3075,148],{"class":97},[87,3077,3078,3080,3082,3084,3086],{"class":89,"line":827},[87,3079,1143],{"class":952},[87,3081,158],{"class":97},[87,3083,1262],{"class":971},[87,3085,1265],{"class":971},[87,3087,121],{"class":97},[87,3089,3090,3092,3094,3096],{"class":89,"line":837},[87,3091,1093],{"class":952},[87,3093,158],{"class":97},[87,3095,1277],{"class":971},[87,3097,121],{"class":97},[87,3099,3100,3102,3104,3106],{"class":89,"line":868},[87,3101,1285],{"class":952},[87,3103,158],{"class":97},[87,3105,1290],{"class":101},[87,3107,121],{"class":97},[87,3109,3110,3112,3114,3116,3118],{"class":89,"line":874},[87,3111,980],{"class":952},[87,3113,158],{"class":97},[87,3115,1082],{"class":97},[87,3117,1304],{"class":101},[87,3119,121],{"class":97},[87,3121,3122,3124,3126,3128],{"class":89,"line":883},[87,3123,1312],{"class":952},[87,3125,158],{"class":97},[87,3127,1317],{"class":101},[87,3129,121],{"class":97},[87,3131,3132,3134,3136,3138],{"class":89,"line":893},[87,3133,1325],{"class":952},[87,3135,158],{"class":97},[87,3137,1212],{"class":971},[87,3139,121],{"class":97},[87,3141,3142],{"class":89,"line":903},[87,3143,1063],{"class":97},[87,3145,3146,3148,3150],{"class":89,"line":913},[87,3147,373],{"class":97},[87,3149,1344],{"class":141},[87,3151,148],{"class":97},[87,3153,3154,3156,3158,3160,3162],{"class":89,"line":922},[87,3155,980],{"class":952},[87,3157,158],{"class":97},[87,3159,1082],{"class":97},[87,3161,1358],{"class":101},[87,3163,121],{"class":97},[87,3165,3166,3168,3170,3172,3174],{"class":89,"line":927},[87,3167,1366],{"class":952},[87,3169,158],{"class":97},[87,3171,1082],{"class":97},[87,3173,1085],{"class":101},[87,3175,121],{"class":97},[87,3177,3178],{"class":89,"line":940},[87,3179,1063],{"class":97},[78,3181,3184],{"className":1751,"code":3182,"filename":3183,"language":1753,"meta":83,"style":83},"import { AlertProvider } from \"@\u002Fproviders\u002FAlertProvider\";\n\nfunction App() {\n  return (\n    \u003CAlertProvider>\n      {\u002F* Rest of your app *\u002F}\n    \u003C\u002FAlertProvider>\n  );\n}\n","app.tsx",[29,3185,3186,3208,3212,3224,3230,3239,3248,3256,3262],{"__ignoreMap":83},[87,3187,3188,3190,3192,3195,3197,3199,3201,3204,3206],{"class":89,"line":90},[87,3189,94],{"class":93},[87,3191,98],{"class":97},[87,3193,3194],{"class":101}," AlertProvider",[87,3196,105],{"class":97},[87,3198,108],{"class":93},[87,3200,111],{"class":97},[87,3202,3203],{"class":114},"@\u002Fproviders\u002FAlertProvider",[87,3205,118],{"class":97},[87,3207,121],{"class":97},[87,3209,3210],{"class":89,"line":124},[87,3211,128],{"emptyLinePlaceholder":127},[87,3213,3214,3217,3220,3222],{"class":89,"line":131},[87,3215,3216],{"class":137},"function",[87,3218,3219],{"class":273}," App",[87,3221,285],{"class":97},[87,3223,148],{"class":97},[87,3225,3226,3228],{"class":89,"line":151},[87,3227,346],{"class":93},[87,3229,2472],{"class":154},[87,3231,3232,3234,3237],{"class":89,"line":163},[87,3233,704],{"class":97},[87,3235,3236],{"class":141},"AlertProvider",[87,3238,484],{"class":97},[87,3240,3241,3243,3246],{"class":89,"line":177},[87,3242,2495],{"class":97},[87,3244,3245],{"class":1459},"\u002F* Rest of your app *\u002F",[87,3247,1063],{"class":97},[87,3249,3250,3252,3254],{"class":89,"line":189},[87,3251,896],{"class":97},[87,3253,3236],{"class":141},[87,3255,484],{"class":97},[87,3257,3258,3260],{"class":89,"line":201},[87,3259,2807],{"class":154},[87,3261,121],{"class":97},[87,3263,3264],{"class":89,"line":213},[87,3265,1063],{"class":97},[78,3267,3270],{"className":1751,"code":3268,"filename":3269,"language":1753,"meta":83,"style":83},"import { useAlert } from \"@\u002Fhooks\u002FuseAlert\";\n\nconst SomeComponent = () => {\n  const { show } = useAlert();\n\n  const handleDelete = async () => {\n    const result = await show({\n      title: \"Confirm Deletion\",\n      message: \"Are you sure you want to delete this item?\",\n      confirmText: \"Delete\",\n      cancelText: \"Cancel\",\n    });\n    if (result) {\n      \u002F\u002F Perform deletion\n    }\n  };\n\n  return \u003Cbutton onClick={handleDelete}>Delete Item\u003C\u002Fbutton>;\n};\n\nexport default SomeComponent;\n","components\u002FSomeComponent.tsx",[29,3271,3272,3293,3297,3312,3330,3334,3351,3368,3383,3398,3413,3428,3436,3449,3454,3459,3463,3467,3491,3495,3499],{"__ignoreMap":83},[87,3273,3274,3276,3278,3280,3282,3284,3286,3289,3291],{"class":89,"line":90},[87,3275,94],{"class":93},[87,3277,98],{"class":97},[87,3279,493],{"class":101},[87,3281,105],{"class":97},[87,3283,108],{"class":93},[87,3285,111],{"class":97},[87,3287,3288],{"class":114},"@\u002Fhooks\u002FuseAlert",[87,3290,118],{"class":97},[87,3292,121],{"class":97},[87,3294,3295],{"class":89,"line":124},[87,3296,128],{"emptyLinePlaceholder":127},[87,3298,3299,3301,3304,3306,3308,3310],{"class":89,"line":131},[87,3300,264],{"class":137},[87,3302,3303],{"class":101}," SomeComponent ",[87,3305,270],{"class":97},[87,3307,427],{"class":97},[87,3309,242],{"class":137},[87,3311,148],{"class":97},[87,3313,3314,3316,3318,3320,3322,3324,3326,3328],{"class":89,"line":151},[87,3315,1573],{"class":137},[87,3317,98],{"class":97},[87,3319,446],{"class":101},[87,3321,105],{"class":97},[87,3323,145],{"class":97},[87,3325,493],{"class":273},[87,3327,285],{"class":154},[87,3329,121],{"class":97},[87,3331,3332],{"class":89,"line":163},[87,3333,128],{"emptyLinePlaceholder":127},[87,3335,3336,3338,3341,3343,3345,3347,3349],{"class":89,"line":177},[87,3337,1573],{"class":137},[87,3339,3340],{"class":101}," handleDelete",[87,3342,145],{"class":97},[87,3344,1562],{"class":137},[87,3346,427],{"class":97},[87,3348,242],{"class":137},[87,3350,148],{"class":97},[87,3352,3353,3356,3358,3360,3362,3364,3366],{"class":89,"line":189},[87,3354,3355],{"class":137},"    const",[87,3357,1576],{"class":101},[87,3359,145],{"class":97},[87,3361,1581],{"class":93},[87,3363,446],{"class":273},[87,3365,354],{"class":154},[87,3367,1588],{"class":97},[87,3369,3370,3373,3375,3377,3379,3381],{"class":89,"line":201},[87,3371,3372],{"class":154},"      title",[87,3374,158],{"class":97},[87,3376,111],{"class":97},[87,3378,1599],{"class":114},[87,3380,118],{"class":97},[87,3382,1604],{"class":97},[87,3384,3385,3388,3390,3392,3394,3396],{"class":89,"line":213},[87,3386,3387],{"class":154},"      message",[87,3389,158],{"class":97},[87,3391,111],{"class":97},[87,3393,1615],{"class":114},[87,3395,118],{"class":97},[87,3397,1604],{"class":97},[87,3399,3400,3403,3405,3407,3409,3411],{"class":89,"line":219},[87,3401,3402],{"class":154},"      confirmText",[87,3404,158],{"class":97},[87,3406,111],{"class":97},[87,3408,1630],{"class":114},[87,3410,118],{"class":97},[87,3412,1604],{"class":97},[87,3414,3415,3418,3420,3422,3424,3426],{"class":89,"line":250},[87,3416,3417],{"class":154},"      cancelText",[87,3419,158],{"class":97},[87,3421,111],{"class":97},[87,3423,1645],{"class":114},[87,3425,118],{"class":97},[87,3427,1604],{"class":97},[87,3429,3430,3432,3434],{"class":89,"line":256},[87,3431,2350],{"class":97},[87,3433,239],{"class":154},[87,3435,121],{"class":97},[87,3437,3438,3441,3443,3445,3447],{"class":89,"line":261},[87,3439,3440],{"class":93},"    if",[87,3442,227],{"class":154},[87,3444,1667],{"class":101},[87,3446,1670],{"class":154},[87,3448,1588],{"class":97},[87,3450,3451],{"class":89,"line":290},[87,3452,3453],{"class":1459},"      \u002F\u002F Perform deletion\n",[87,3455,3456],{"class":89,"line":295},[87,3457,3458],{"class":97},"    }\n",[87,3460,3461],{"class":89,"line":343},[87,3462,216],{"class":97},[87,3464,3465],{"class":89,"line":367},[87,3466,128],{"emptyLinePlaceholder":127},[87,3468,3469,3471,3473,3475,3477,3479,3481,3483,3485,3487,3489],{"class":89,"line":394},[87,3470,346],{"class":93},[87,3472,2571],{"class":97},[87,3474,793],{"class":154},[87,3476,2659],{"class":137},[87,3478,2662],{"class":97},[87,3480,1721],{"class":101},[87,3482,1934],{"class":97},[87,3484,1728],{"class":101},[87,3486,648],{"class":97},[87,3488,793],{"class":154},[87,3490,1929],{"class":97},[87,3492,3493],{"class":89,"line":404},[87,3494,253],{"class":97},[87,3496,3497],{"class":89,"line":409},[87,3498,128],{"emptyLinePlaceholder":127},[87,3500,3501,3503,3506,3509],{"class":89,"line":414},[87,3502,134],{"class":93},[87,3504,3505],{"class":93}," default",[87,3507,3508],{"class":101}," SomeComponent",[87,3510,121],{"class":97},[10,3512,3513,3514,3516,3517],{},"And that's it. One shared piece of state, one Promise, and you've got a reusable confirmation dialog you can call from anywhere in your app with a single await.\nThe pattern scales well too, you can extend ",[29,3515,279],{}," to support different dialog types (info, warning, destructive) or custom actions, without changing how you call it. The API stays the same: ",[29,3518,3519],{},"await show(...)",[932,3521,3522],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":83,"searchDepth":124,"depth":124,"links":3524},[],null,"2026-01-05","A reusable alert dialog implementation in both Vue and React using a Promise-based approach for easy integration across your app.","md","..\u002F..\u002Fassets\u002Fimages\u002Falert-dialog.webp",{"slug":3531},"reusable-alert-dialog-vue-react","\u002Fblog\u002Freusable-alert-dialog-vue-react",{"title":5,"description":3527},{"loc":3532},"blog\u002Freusable-alert-dialog-vue-react",[3537,1745,3538],"Vue","Patterns","uLJdIpzcSia3cWEZnugMnZeykbONJ0DfOQ_xd3SobL0",1782856829686]