var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),z=(i,e)=>{for(var t in e)r(i,t,{get:e[t],enumerable:!0})},s=(i,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of u(e))!m.call(i,o)&&o!==t&&r(i,o,{get:()=>e[o],enumerable:!(a=x(e,o))||a.enumerable});return i};var f=(i,e,t)=>(t=i!=null?p(g(i)):{},s(e||!i||!i.__esModule?r(t,"default",{value:i,enumerable:!0}):t,i)),R=i=>s(r({},"__esModule",{value:!0}),i);var l=b((j,d)=>{d.exports=_jsx_runtime});var w={};z(w,{default:()=>h,frontmatter:()=>B});var n=f(l()),B={id:"resize-box",title:"ResizeBox",package:"@saas-ui-pro/react",description:"Utility hook and component to create resizable panels."};function c(i){let e={code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...i.components},{ComponentLinks:t}=e;return t||k("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 h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(c,{...i})}):c(i)}function k(i,e){throw new Error("Expected "+(e?"component":"object")+" `"+i+"` to be defined: you likely forgot to import, pass, or provide it.")}return R(w);})(); ;return Component;