[{"data":1,"prerenderedAt":484},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Freact\u002Ficon":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":34,"body":143,"description":480,"extension":339,"meta":481,"navigation":262,"path":35,"seo":482,"stem":36,"__hash__":483},"docs\u002Freact\u002Ficon.md",{"type":144,"value":145,"toc":475},"minimark",[146,151,160,185,205,209,222,330,360,370,464,468,471],[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,213,214,221],{},[156,212,34],{}," wraps a ",[215,216,220],"a",{"href":217,"rel":218},"https:\u002F\u002Fheroicons.com",[219],"nofollow","Heroicons"," component with consistent sizing and accessibility. Pass the icon component itself, so only the icons you use end up in your bundle:",[161,223,225],{"className":187,"code":224,"language":189,"meta":166,"style":166},"import { CheckCircleIcon } from '@heroicons\u002Freact\u002F24\u002Foutline';\nimport { Icon } from '@vinui\u002Freact';\n\n\u003CIcon icon={CheckCircleIcon} size=\"lg\" \u002F>                    \u002F\u002F decorative (aria-hidden)\n\u003CIcon icon={CheckCircleIcon} size=\"lg\" label=\"Completed\" \u002F>  \u002F\u002F announced as \"Completed\"\n",[156,226,227,242,257,264,297],{"__ignoreMap":166},[170,228,229,231,234,237,240],{"class":172,"line":173},[170,230,197],{"class":196},[170,232,233],{"class":203}," { CheckCircleIcon } ",[170,235,236],{"class":196},"from",[170,238,239],{"class":180}," '@heroicons\u002Freact\u002F24\u002Foutline'",[170,241,204],{"class":203},[170,243,245,247,250,252,255],{"class":172,"line":244},2,[170,246,197],{"class":196},[170,248,249],{"class":203}," { Icon } ",[170,251,236],{"class":196},[170,253,254],{"class":180}," '@vinui\u002Freact'",[170,256,204],{"class":203},[170,258,260],{"class":172,"line":259},3,[170,261,263],{"emptyLinePlaceholder":262},true,"\n",[170,265,267,270,273,276,279,282,285,287,290,293],{"class":172,"line":266},4,[170,268,269],{"class":203},"\u003C",[170,271,34],{"class":272},"sYu0t",[170,274,275],{"class":176}," icon",[170,277,278],{"class":196},"=",[170,280,281],{"class":203},"{CheckCircleIcon} ",[170,283,284],{"class":176},"size",[170,286,278],{"class":196},[170,288,289],{"class":180},"\"lg\"",[170,291,292],{"class":203}," \u002F>                    ",[170,294,296],{"class":295},"sAwPA","\u002F\u002F decorative (aria-hidden)\n",[170,298,300,302,304,306,308,310,312,314,316,319,321,324,327],{"class":172,"line":299},5,[170,301,269],{"class":203},[170,303,34],{"class":272},[170,305,275],{"class":176},[170,307,278],{"class":196},[170,309,281],{"class":203},[170,311,284],{"class":176},[170,313,278],{"class":196},[170,315,289],{"class":180},[170,317,318],{"class":176}," label",[170,320,278],{"class":196},[170,322,323],{"class":180},"\"Completed\"",[170,325,326],{"class":203}," \u002F>  ",[170,328,329],{"class":295},"\u002F\u002F announced as \"Completed\"\n",[152,331,332,333,336,337,340,341,344,345,348,349,348,352,355,356,359],{},"Sizes are ",[156,334,335],{},"sm"," (16px), ",[156,338,339],{},"md"," (20px, default) and ",[156,342,343],{},"lg"," (24px). Use the matching Heroicons set (",[156,346,347],{},"16\u002Fsolid",", ",[156,350,351],{},"20\u002Fsolid",[156,353,354],{},"24\u002Foutline"," or ",[156,357,358],{},"24\u002Fsolid",") so strokes stay crisp. Icons inherit the text color.",[152,361,362,363,365,366,369],{},"Inside a ",[156,364,10],{},", icons follow the button's size. Icon-only buttons need an ",[156,367,368],{},"aria-label",":",[161,371,373],{"className":187,"code":372,"language":189,"meta":166,"style":166},"\u003CButton>\n  \u003CIcon icon={PlusIcon} \u002F>\n  New project\n\u003C\u002FButton>\n\n\u003CButton variant=\"ghost\" aria-label=\"Settings\">\n  \u003CIcon icon={Cog6ToothIcon} \u002F>\n\u003C\u002FButton>\n",[156,374,375,384,398,403,412,416,441,455],{"__ignoreMap":166},[170,376,377,379,381],{"class":172,"line":173},[170,378,269],{"class":203},[170,380,10],{"class":272},[170,382,383],{"class":203},">\n",[170,385,386,389,391,393,395],{"class":172,"line":244},[170,387,388],{"class":203},"  \u003C",[170,390,34],{"class":272},[170,392,275],{"class":176},[170,394,278],{"class":196},[170,396,397],{"class":203},"{PlusIcon} \u002F>\n",[170,399,400],{"class":172,"line":259},[170,401,402],{"class":203},"  New project\n",[170,404,405,408,410],{"class":172,"line":266},[170,406,407],{"class":203},"\u003C\u002F",[170,409,10],{"class":272},[170,411,383],{"class":203},[170,413,414],{"class":172,"line":299},[170,415,263],{"emptyLinePlaceholder":262},[170,417,419,421,423,426,428,431,434,436,439],{"class":172,"line":418},6,[170,420,269],{"class":203},[170,422,10],{"class":272},[170,424,425],{"class":176}," variant",[170,427,278],{"class":196},[170,429,430],{"class":180},"\"ghost\"",[170,432,433],{"class":176}," aria-label",[170,435,278],{"class":196},[170,437,438],{"class":180},"\"Settings\"",[170,440,383],{"class":203},[170,442,444,446,448,450,452],{"class":172,"line":443},7,[170,445,388],{"class":203},[170,447,34],{"class":272},[170,449,275],{"class":176},[170,451,278],{"class":196},[170,453,454],{"class":203},"{Cog6ToothIcon} \u002F>\n",[170,456,458,460,462],{"class":172,"line":457},8,[170,459,407],{"class":203},[170,461,10],{"class":272},[170,463,383],{"class":203},[147,465,467],{"id":466},"more-to-come","More to come",[152,469,470],{},"Detailed examples, keyboard interaction and the full component API are on their way.",[472,473,474],"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}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":166,"searchDepth":244,"depth":259,"links":476},[477,478,479],{"id":149,"depth":244,"text":150},{"id":207,"depth":244,"text":208},{"id":466,"depth":244,"text":467},"Heroicons with consistent sizing and accessible labels.",{},{"title":34,"description":480},"ZTWMBAvYh3g5twQXy0HhvkBrQupypmxym1DGYxV8b70",1792929667667]