Dimensions

Set the dimensions for the layer.

Width

Max. width

Height

Max. height

) } `,__src__:"registry/default/example/popover/popover-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Input } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/input"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Label } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/label"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Popover, PopoverTrigger } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"PopoverDemo"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Open popover"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-80"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid gap-4 "'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"h4"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-medium leading-none"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Dimensions"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-sm text-muted-foreground"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Set the dimensions for the layer."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"width"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Width"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"width"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"100%"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxWidth"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Max. width"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxWidth"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"300px"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"height"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Height"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"height"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"25px"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxHeight"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Max. height"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxHeight"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Popover, PopoverTrigger } from "@/components/ui/popover" export function PopoverDemo() { return (

Dimensions

Set the dimensions for the layer.

Width

Max. width

Height

Max. height

) } `,__src__:"registry/new-york/example/popover/popover-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Input } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/input"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Label } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/label"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Popover, PopoverTrigger } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"PopoverDemo"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Open popover"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-80"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"h4"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-medium leading-none"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Dimensions"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-sm text-muted-foreground"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Set the dimensions for the layer."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"width"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Width"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"width"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"100%"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxWidth"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Max. width"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxWidth"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"300px"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"height"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Height"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"height"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"25px"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxHeight"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Max. height"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxHeight"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "})]})})})]}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(o,{defaultValue:"cli",children:[(0,n.jsxs)(r,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Copy & Paste"})]}),(0,n.jsxs)(t,{value:"cli",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @sly-cli/sly add jolly-ui popover `,__npmCommand__:`npx @sly-cli/sly add jolly-ui popover `,__yarnCommand__:`npx @sly-cli/sly add jolly-ui popover `,__pnpmCommand__:`pnpm dlx @sly-cli/sly add jolly-ui popover `,__bunCommand__:`bunx --bun @sly-cli/sly add jolly-ui popover `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"@sly-cli/sly"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"add"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"jolly-ui"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"popover"})]})})})}),(0,n.jsx)(l.p,{children:(0,n.jsx)(l.strong,{children:"Note: Only the default style can be installed via CLI at the moment"})})]}),(0,n.jsx)(t,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(p,{children:"Copy and paste the following code into your project."}),(0,n.jsxs)(h,{name:"popover",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import { DialogTrigger, Popover, PopoverProps } from "react-aria-components" import { cn } from "@/lib/utils" const PopoverTrigger = DialogTrigger const _Popover = ({ className, offset = 4, ...props }: PopoverProps) => ( cn( "z-50 w-72 overflow-y-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2", typeof className === "function" ? className(values) : className ) } {...props} /> ) export { _Popover as Popover, PopoverTrigger } `,__src__:"registry/default/ui/popover.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { DialogTrigger, Popover, PopoverProps } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react-aria-components"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { cn } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/lib/utils"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" DialogTrigger"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"_Popover"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"4"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"PopoverProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"values"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"z-50 w-72 overflow-y-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" className "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"function"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(values) "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" className"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { _Popover "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Popover, PopoverTrigger }"})]})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import { DialogTrigger, Popover, PopoverProps } from "react-aria-components" import { cn } from "@/lib/utils" const PopoverTrigger = DialogTrigger const _Popover = ({ className, offset = 4, ...props }: PopoverProps) => ( cn( "z-50 w-72 overflow-y-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2", typeof className === "function" ? className(values) : className ) } {...props} /> ) export { _Popover as Popover, PopoverTrigger } `,__src__:"registry/new-york/ui/popover.tsx",__style__:"new-york",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"*"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { DialogTrigger, Popover, PopoverProps } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react-aria-components"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { cn } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/lib/utils"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" DialogTrigger"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"_Popover"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"4"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"PopoverProps"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"offset"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFA657"},children:"values"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"z-50 w-72 overflow-y-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" className "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"function"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(values) "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" className"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { _Popover "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Popover, PopoverTrigger }"})]})]})})})]}),(0,n.jsx)(p,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,n.jsxs)(l.h2,{id:"usage",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,n.jsxs)(l.h3,{id:"basic",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#basic",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Basic"]}),` `,(0,n.jsxs)(s,{name:"popover-demo",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Popover, PopoverTrigger } from "@/components/ui/popover" export function PopoverDemo() { return (

Dimensions

Set the dimensions for the layer.

Width

Max. width

Height

Max. height

Dimensions

Set the dimensions for the layer.

Width

Max. width

Height

Max. height

) } function DemoContent() { return (

Dimensions

Set the dimensions for the layer.

Width

Max. width

Height

Max. height

) } `,__src__:"registry/default/example/popover/popover-position.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Input } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/input"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Label } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/label"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Popover, PopoverTrigger } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"PopoverPosition"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Left"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"start"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"DemoContent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Up"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"top"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"DemoContent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Down"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"bottom"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"DemoContent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Right"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"end"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"DemoContent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"DemoContent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"h4"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-medium leading-none"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Dimensions"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-sm text-muted-foreground"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Set the dimensions for the layer."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"width"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Width"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"width"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"100%"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxWidth"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Max. width"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxWidth"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"300px"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"height"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Height"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"height"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"25px"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxHeight"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Max. height"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxHeight"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsx)(l.span,{className:"line",children:" "})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Popover, PopoverTrigger } from "@/components/ui/popover" export function PopoverPosition() { return (

) } function DemoContent() { return (

Dimensions

Set the dimensions for the layer.

Width

Max. width

Height

Max. height

) } `,__src__:"registry/new-york/example/popover/popover-position.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Input } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/input"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Label } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/label"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Popover, PopoverTrigger } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/popover"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"PopoverPosition"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Left"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"start"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"DemoContent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Up"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"top"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"DemoContent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Down"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"bottom"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"DemoContent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Right"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"placement"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"end"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"DemoContent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"DemoContent"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"h4"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-medium leading-none"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Dimensions"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-sm text-muted-foreground"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Set the dimensions for the layer."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"width"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Width"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"width"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"100%"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxWidth"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Max. width"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxWidth"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"300px"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"height"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Height"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"height"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"25px"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid grid-cols-3 items-center gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxHeight"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Max. height"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"maxHeight"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"col-span-2 h-8"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "})]})})})]})]})}function P(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var b=P;function c(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return A(L);})(); ;return Component;