var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),b=(i,e)=>{for(var t in e)r(i,t,{get:e[t],enumerable:!0})},a=(i,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of x(e))!g.call(i,o)&&o!==t&&r(i,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return i};var z=(i,e,t)=>(t=i!=null?h(u(i)):{},a(e||!i||!i.__esModule?r(t,"default",{value:i,enumerable:!0}):t,i)),f=i=>a(r({},"__esModule",{value:!0}),i);var l=m((W,d)=>{d.exports=_jsx_runtime});var w={};b(w,{default:()=>k,frontmatter:()=>R});var n=z(l()),R={id:"resize-box",title:"ResizeBox",package:"@saas-ui-pro/react",description:"Utility hook and component to create resizable panels."};function c(i){let e=Object.assign({p:"p",h2:"h2",ul:"ul",li:"li",code:"code",pre:"pre",h3:"h3"},i.components),{ComponentLinks:t}=e;return t||j("ComponentLinks",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"ResizeBox is used for creating resizable sidebar panels, it currently only supports resizing the X axis."}),` `,(0,n.jsx)(t,{pro:{gumroad:!0}}),` `,(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"ResizeBox"}),": Resizable Box component."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"ResizeHandle"}),": The resize handle."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"useResize"}),": Hook that returns prop getters for low-level integration."]}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { ResizeBox, ResizeHandle, useResize } from '@saas-ui-pro/react' `})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsxs)(e.p,{children:["ResizeBox behaves just like a ",(0,n.jsx)(e.code,{children:"Box"})," component and can be used as a container component."]}),` `,(0,n.jsx)(e.h3,{id:"basic-setup",children:"Basic setup"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",inline:"true",children:` `})}),` `,(0,n.jsx)(e.h3,{id:"min-and-max-width",children:"Min and Max Width"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"minWidth"})," and ",(0,n.jsx)(e.code,{children:"maxWidth"})," properties can be used to limit the range of the resizer."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",inline:"true",children:` `})}),` `,(0,n.jsx)(e.h3,{id:"disable-resizing",children:"Disable resizing"}),` `,(0,n.jsxs)(e.p,{children:["Use the ",(0,n.jsx)(e.code,{children:"isResizable"})," to disable resizing."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",inline:"true",children:` `})}),` `,(0,n.jsx)(e.h3,{id:"handle-position",children:"Handle position"}),` `,(0,n.jsxs)(e.p,{children:["The handle can be positioned either ",(0,n.jsx)(e.code,{children:"right"})," or ",(0,n.jsx)(e.code,{children:"left"})," side of the container."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",inline:"true",children:` `})}),` `,(0,n.jsx)(e.h3,{id:"with-content",children:"With content"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",inline:"true",children:` \u201CMost of all, I discovered that in order to succeed with a product you must truly get to know your customers and build something for them.\u201D \u2013 Marc Benioff `})}),` `,(0,n.jsx)(e.h3,{id:"custom",children:"Custom"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",inline:"true",children:`import { Box } from '@chakra-ui/react' import { ResizeHandle, useResize } from '@saas-ui-pro/react' export default function Custom() { const { getContainerProps, getHandleProps } = useResize({ onHandleClick: (e: any) => { alert('Resize handle clicked') }, }) return ( ) } `})})]})}function B(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(c,i)})):c(i)}var k=B;function j(i,e){throw new Error("Expected "+(e?"component":"object")+" `"+i+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(w);})(); ;return Component;