Dimensions

Set the dimensions for the layer.

Width

Max. width

Height

Max. height

) } `,__src__:"registry/ax-site/example/popover-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-input'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-label'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-popover'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"PopoverDemo"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"asChild"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"outline"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Open popover"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"w-80"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"space-y-2"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"h4"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"font-medium leading-none"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Dimensions"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-sm text-muted-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Set the dimensions for the layer."}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"width"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Width"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"width"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"100%"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"col-span-2 h-8"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"maxWidth"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Max. width"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"maxWidth"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"300px"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"col-span-2 h-8"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"height"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Height"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"height"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"25px"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"col-span-2 h-8"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"maxHeight"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Max. height"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"maxHeight"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"none"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"col-span-2 h-8"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from '@brudi/react-button' import { Input } from '@brudi/react-input' import { Label } from '@brudi/react-label' import { Popover, PopoverContent, PopoverTrigger } from '@brudi/react-popover' export function PopoverDemo() { return (

Dimensions

Set the dimensions for the layer.

Width

Max. width

Height

Max. height

) } `,__src__:"registry/ax-app/example/popover-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-input'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-label'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-popover'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"PopoverDemo"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"asChild"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"outline"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Open popover"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"w-80"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"space-y-2"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"h4"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"font-medium leading-none"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Dimensions"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-muted-foreground text-sm"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Set the dimensions for the layer."}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"width"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Width"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"width"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"100%"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"col-span-2 h-8"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"maxWidth"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Max. width"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"maxWidth"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"300px"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"col-span-2 h-8"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"height"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Height"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"height"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"25px"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"col-span-2 h-8"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"maxHeight"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Max. height"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Input"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"maxHeight"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"none"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"col-span-2 h-8"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @brudi/react-popover `,__npmCommand__:`npm install @brudi/react-popover `,__yarnCommand__:`yarn add @brudi/react-popover `,__pnpmCommand__:`pnpm add @brudi/react-popover `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"install"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"@brudi/react-popover"})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Popover, PopoverContent, PopoverTrigger, } from "@brudi/react-popover" `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"@brudi/react-popover"'})]})]})})}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` Open Place content for the popover here. `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Open"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Place content for the popover here."}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]})]})})}),` `,(0,e.jsxs)(l.h2,{id:"customization",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#customization",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Customization"]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @brudi/ui extend popover `,__npmCommand__:`npx @brudi/ui extend popover `,__yarnCommand__:`npx @brudi/ui extend popover `,__pnpmCommand__:`pnpx @brudi/ui extend popover `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"@brudi/ui"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"extend"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"popover"})]})})})}),` `,(0,e.jsx)(c,{type:"single",collapsible:!0,children:(0,e.jsxs)(s,{value:"manual-installation",children:[(0,e.jsx)(t,{children:"Manual Customization"}),(0,e.jsx)(p,{children:(0,e.jsxs)(d,{children:[(0,e.jsx)(a,{children:"Install the following dependencies:"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @brudi/react-popover `,__npmCommand__:`npm install @brudi/react-popover `,__yarnCommand__:`yarn add @brudi/react-popover `,__pnpmCommand__:`pnpm add @brudi/react-popover `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"install"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"@brudi/react-popover"})]})})})}),(0,e.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(h,{name:"popover",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client' import * as PopoverPrimitive from '@brudi/react-popover' const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = PopoverPrimitive.Content export { Popover, PopoverContent, PopoverTrigger } `,__src__:"registry/ax-base/ui/popover.tsx",__style__:"ax-base",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'use client'"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-popover'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Root"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Trigger"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Content"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client' import * as PopoverPrimitive from '@brudi/react-popover' const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = PopoverPrimitive.Content export { Popover, PopoverContent, PopoverTrigger } `,__src__:"registry/ax-site/ui/popover.tsx",__style__:"ax-site",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'use client'"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-popover'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Root"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Trigger"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Content"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client' import * as PopoverPrimitive from '@brudi/react-popover' const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = PopoverPrimitive.Content export { Popover, PopoverContent, PopoverTrigger } `,__src__:"registry/ax-app/ui/popover.tsx",__style__:"ax-app",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'use client'"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-popover'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Root"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Trigger"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Content"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Popover"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverContent"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"PopoverTrigger"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]})]})})})]}),(0,e.jsx)(a,{children:"Update the import paths to match your project setup."})]})})]})})]})}function S(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(m,n)})):m(n)}var b=S;function o(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return B(x);})(); ;return Component;