[{"data":1,"prerenderedAt":508},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Freact\u002Fdialog":141},[4,82],{"title":5,"path":6,"stem":7,"children":8,"page":81},"React","\u002Freact","react",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77],{"title":10,"path":11,"stem":12},"Button","\u002Freact\u002Fbutton","react\u002Fbutton",{"title":14,"path":15,"stem":16},"Checkbox","\u002Freact\u002Fcheckbox","react\u002Fcheckbox",{"title":18,"path":19,"stem":20},"Combobox (Autocomplete)","\u002Freact\u002Fcombobox","react\u002Fcombobox",{"title":22,"path":23,"stem":24},"Dialog (Modal)","\u002Freact\u002Fdialog","react\u002Fdialog",{"title":26,"path":27,"stem":28},"Disclosure","\u002Freact\u002Fdisclosure","react\u002Fdisclosure",{"title":30,"path":31,"stem":32},"Fieldset","\u002Freact\u002Ffieldset","react\u002Ffieldset",{"title":34,"path":35,"stem":36},"Icon","\u002Freact\u002Ficon","react\u002Ficon",{"title":38,"path":39,"stem":40},"Input","\u002Freact\u002Finput","react\u002Finput",{"title":42,"path":43,"stem":44},"Listbox (Select)","\u002Freact\u002Flistbox","react\u002Flistbox",{"title":46,"path":47,"stem":48},"Menu (Dropdown)","\u002Freact\u002Fmenu","react\u002Fmenu",{"title":50,"path":51,"stem":52},"Pattern","\u002Freact\u002Fpattern","react\u002Fpattern",{"title":54,"path":55,"stem":56},"Popover","\u002Freact\u002Fpopover","react\u002Fpopover",{"title":58,"path":59,"stem":60},"Radio Group","\u002Freact\u002Fradio-group","react\u002Fradio-group",{"title":62,"path":63,"stem":64},"Select","\u002Freact\u002Fselect","react\u002Fselect",{"title":66,"path":67,"stem":68},"Switch (Toggle)","\u002Freact\u002Fswitch","react\u002Fswitch",{"title":70,"path":71,"stem":72},"Tabs","\u002Freact\u002Ftabs","react\u002Ftabs",{"title":74,"path":75,"stem":76},"Textarea","\u002Freact\u002Ftextarea","react\u002Ftextarea",{"title":78,"path":79,"stem":80},"Transition","\u002Freact\u002Ftransition","react\u002Ftransition",false,{"title":83,"path":84,"stem":85,"children":86,"page":81},"Vue","\u002Fvue","vue",[87,90,93,96,99,102,105,108,111,114,117,120,123,126,129,132,135,138],{"title":10,"path":88,"stem":89},"\u002Fvue\u002Fbutton","vue\u002Fbutton",{"title":14,"path":91,"stem":92},"\u002Fvue\u002Fcheckbox","vue\u002Fcheckbox",{"title":18,"path":94,"stem":95},"\u002Fvue\u002Fcombobox","vue\u002Fcombobox",{"title":22,"path":97,"stem":98},"\u002Fvue\u002Fdialog","vue\u002Fdialog",{"title":26,"path":100,"stem":101},"\u002Fvue\u002Fdisclosure","vue\u002Fdisclosure",{"title":30,"path":103,"stem":104},"\u002Fvue\u002Ffieldset","vue\u002Ffieldset",{"title":34,"path":106,"stem":107},"\u002Fvue\u002Ficon","vue\u002Ficon",{"title":38,"path":109,"stem":110},"\u002Fvue\u002Finput","vue\u002Finput",{"title":42,"path":112,"stem":113},"\u002Fvue\u002Flistbox","vue\u002Flistbox",{"title":46,"path":115,"stem":116},"\u002Fvue\u002Fmenu","vue\u002Fmenu",{"title":50,"path":118,"stem":119},"\u002Fvue\u002Fpattern","vue\u002Fpattern",{"title":54,"path":121,"stem":122},"\u002Fvue\u002Fpopover","vue\u002Fpopover",{"title":58,"path":124,"stem":125},"\u002Fvue\u002Fradio-group","vue\u002Fradio-group",{"title":62,"path":127,"stem":128},"\u002Fvue\u002Fselect","vue\u002Fselect",{"title":66,"path":130,"stem":131},"\u002Fvue\u002Fswitch","vue\u002Fswitch",{"title":70,"path":133,"stem":134},"\u002Fvue\u002Ftabs","vue\u002Ftabs",{"title":74,"path":136,"stem":137},"\u002Fvue\u002Ftextarea","vue\u002Ftextarea",{"title":78,"path":139,"stem":140},"\u002Fvue\u002Ftransition","vue\u002Ftransition",{"id":142,"title":22,"body":143,"description":504,"extension":455,"meta":505,"navigation":245,"path":23,"seo":506,"stem":24,"__hash__":507},"docs\u002Freact\u002Fdialog.md",{"type":144,"value":145,"toc":499},"minimark",[146,151,160,185,205,209,220,442,488,492,495],[147,148,150],"h2",{"id":149},"installation","Installation",[152,153,154,155,159],"p",{},"Install ",[156,157,158],"code",{},"@vinui\u002Freact"," from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:",[161,162,167],"pre",{"className":163,"code":164,"language":165,"meta":166,"style":166},"language-bash shiki shiki-themes github-light","pnpm add github:vindotski\u002Fvinui#path:packages\u002Freact\n","bash","",[156,168,169],{"__ignoreMap":166},[170,171,174,178,182],"span",{"class":172,"line":173},"line",1,[170,175,177],{"class":176},"s7eDp","pnpm",[170,179,181],{"class":180},"sYBdl"," add",[170,183,184],{"class":180}," github:vindotski\u002Fvinui#path:packages\u002Freact\n",[161,186,190],{"className":187,"code":188,"language":189,"meta":166,"style":166},"language-tsx shiki shiki-themes github-light","import '@vinui\u002Freact\u002Fstyles.css';\n","tsx",[156,191,192],{"__ignoreMap":166},[170,193,194,198,201],{"class":172,"line":173},[170,195,197],{"class":196},"sD7c4","import",[170,199,200],{"class":180}," '@vinui\u002Freact\u002Fstyles.css'",[170,202,204],{"class":203},"sgsFI",";\n",[147,206,208],{"id":207},"usage","Usage",[152,210,211,212,219],{},"A modal dialog built on ",[213,214,218],"a",{"href":215,"rel":216},"https:\u002F\u002Fheadlessui.com\u002Freact\u002Fdialog",[217],"nofollow","Headless UI's Dialog",". Focus is trapped inside while open, page scrolling is locked, and Escape or a click outside closes it:",[161,221,223],{"className":187,"code":222,"language":189,"meta":166,"style":166},"import { Button, Dialog, DialogActions, DialogDescription, DialogTitle } from '@vinui\u002Freact';\n\n\u003CDialog open={open} onClose={() => setOpen(false)} role=\"alertdialog\" size=\"sm\">\n  \u003CDialogTitle>Delete project?\u003C\u002FDialogTitle>\n  \u003CDialogDescription>This can’t be undone.\u003C\u002FDialogDescription>\n  \u003CDialogActions>\n    \u003CButton variant=\"secondary\" onClick={() => setOpen(false)} autoFocus>\n      Cancel\n    \u003C\u002FButton>\n    \u003CButton onClick={deleteProject}>Delete\u003C\u002FButton>\n  \u003C\u002FDialogActions>\n\u003C\u002FDialog>;\n",[156,224,225,240,247,308,324,339,349,387,393,403,421,431],{"__ignoreMap":166},[170,226,227,229,232,235,238],{"class":172,"line":173},[170,228,197],{"class":196},[170,230,231],{"class":203}," { Button, Dialog, DialogActions, DialogDescription, DialogTitle } ",[170,233,234],{"class":196},"from",[170,236,237],{"class":180}," '@vinui\u002Freact'",[170,239,204],{"class":203},[170,241,243],{"class":172,"line":242},2,[170,244,246],{"emptyLinePlaceholder":245},true,"\n",[170,248,250,253,257,260,263,266,269,271,274,277,280,283,286,289,292,294,297,300,302,305],{"class":172,"line":249},3,[170,251,252],{"class":203},"\u003C",[170,254,256],{"class":255},"sYu0t","Dialog",[170,258,259],{"class":176}," open",[170,261,262],{"class":196},"=",[170,264,265],{"class":203},"{open} ",[170,267,268],{"class":176},"onClose",[170,270,262],{"class":196},[170,272,273],{"class":203},"{() ",[170,275,276],{"class":196},"=>",[170,278,279],{"class":176}," setOpen",[170,281,282],{"class":203},"(",[170,284,285],{"class":255},"false",[170,287,288],{"class":203},")} ",[170,290,291],{"class":176},"role",[170,293,262],{"class":196},[170,295,296],{"class":180},"\"alertdialog\"",[170,298,299],{"class":176}," size",[170,301,262],{"class":196},[170,303,304],{"class":180},"\"sm\"",[170,306,307],{"class":203},">\n",[170,309,311,314,317,320,322],{"class":172,"line":310},4,[170,312,313],{"class":203},"  \u003C",[170,315,316],{"class":255},"DialogTitle",[170,318,319],{"class":203},">Delete project?\u003C\u002F",[170,321,316],{"class":255},[170,323,307],{"class":203},[170,325,327,329,332,335,337],{"class":172,"line":326},5,[170,328,313],{"class":203},[170,330,331],{"class":255},"DialogDescription",[170,333,334],{"class":203},">This can’t be undone.\u003C\u002F",[170,336,331],{"class":255},[170,338,307],{"class":203},[170,340,342,344,347],{"class":172,"line":341},6,[170,343,313],{"class":203},[170,345,346],{"class":255},"DialogActions",[170,348,307],{"class":203},[170,350,352,355,357,360,362,365,368,370,372,374,376,378,380,382,385],{"class":172,"line":351},7,[170,353,354],{"class":203},"    \u003C",[170,356,10],{"class":255},[170,358,359],{"class":176}," variant",[170,361,262],{"class":196},[170,363,364],{"class":180},"\"secondary\"",[170,366,367],{"class":176}," onClick",[170,369,262],{"class":196},[170,371,273],{"class":203},[170,373,276],{"class":196},[170,375,279],{"class":176},[170,377,282],{"class":203},[170,379,285],{"class":255},[170,381,288],{"class":203},[170,383,384],{"class":176},"autoFocus",[170,386,307],{"class":203},[170,388,390],{"class":172,"line":389},8,[170,391,392],{"class":203},"      Cancel\n",[170,394,396,399,401],{"class":172,"line":395},9,[170,397,398],{"class":203},"    \u003C\u002F",[170,400,10],{"class":255},[170,402,307],{"class":203},[170,404,406,408,410,412,414,417,419],{"class":172,"line":405},10,[170,407,354],{"class":203},[170,409,10],{"class":255},[170,411,367],{"class":176},[170,413,262],{"class":196},[170,415,416],{"class":203},"{deleteProject}>Delete\u003C\u002F",[170,418,10],{"class":255},[170,420,307],{"class":203},[170,422,424,427,429],{"class":172,"line":423},11,[170,425,426],{"class":203},"  \u003C\u002F",[170,428,346],{"class":255},[170,430,307],{"class":203},[170,432,434,437,439],{"class":172,"line":433},12,[170,435,436],{"class":203},"\u003C\u002F",[170,438,256],{"class":255},[170,440,441],{"class":203},">;\n",[443,444,445,461,473,478],"ul",{},[446,447,448,449,452,453,456,457,460],"li",{},"Sizes are ",[156,450,451],{},"sm",", ",[156,454,455],{},"md"," (default) and ",[156,458,459],{},"lg","; dialogs are full-width on small screens.",[446,462,463,465,466,468,469,472],{},[156,464,316],{}," and ",[156,467,331],{}," label the dialog for screen readers. Put other content in ",[156,470,471],{},"DialogBody",".",[446,474,475,477],{},[156,476,346],{}," right-aligns buttons, stacking them on small screens with the last (primary) on top.",[446,479,480,481,483,484,487],{},"Put ",[156,482,384],{}," on the element to focus first; use ",[156,485,486],{},"role=\"alertdialog\""," for confirmations.",[147,489,491],{"id":490},"more-to-come","More to come",[152,493,494],{},"Detailed examples, keyboard interaction and the full component API are on their way.",[496,497,498],"style",{},"html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}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 pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}",{"title":166,"searchDepth":242,"depth":249,"links":500},[501,502,503],{"id":149,"depth":242,"text":150},{"id":207,"depth":242,"text":208},{"id":490,"depth":242,"text":491},"A modal dialog with focus trapping, scroll locking and an accessible title.",{},{"title":22,"description":504},"SuN04IU30YMvW3G5LSCcJ_LOctGt80N0A6bCqz1GP0k",1792929667665]