var Component=(()=>{var b=Object.create;var i=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var f=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),m=(e,o)=>{for(var l in o)i(e,l,{get:o[l],enumerable:!0})},a=(e,o,l,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of s(o))!h.call(e,r)&&r!==l&&i(e,r,{get:()=>o[r],enumerable:!(t=T(o,r))||t.enumerable});return e};var B=(e,o,l)=>(l=e!=null?b(p(e)):{},a(o||!e||!e.__esModule?i(l,"default",{value:e,enumerable:!0}):l,e)),F=e=>a(i({},"__esModule",{value:!0}),e);var g=f((G,c)=>{c.exports=_jsx_runtime});var x={};m(x,{default:()=>d,frontmatter:()=>v});var n=B(g()),v={id:"toolbar",title:"Toolbar",description:"A container for grouping a set of controls, like buttons, toggles or menus."};function u(e){let o={code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...e.components},{ComponentLinks:l}=o;return l||A("ComponentLinks",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{pro:{gumroad:!0}}),` `,(0,n.jsx)(o.h2,{id:"import",children:"Import"}),` `,(0,n.jsxs)(o.ul,{children:[` `,(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.code,{children:"Toolbar"}),": The container component."]}),` `,(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.code,{children:"ToolbarButton"}),": Either a regular or icon button."]}),` `,(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.code,{children:"ToolbarGroup"}),": Component for grouping buttons."]}),` `,(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.code,{children:"ToolbarToggleGroup"}),": A set of toggle buttons with on/off state."]}),` `,(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.code,{children:"ToolbarToggleButton"}),": A button that can be toggled on or off."]}),` `,(0,n.jsxs)(o.li,{children:[(0,n.jsx)(o.code,{children:"ToolbarDivider"}),": A divider component."]}),` `]}),` `,(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-ts",children:`import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarToggleGroup, ToolbarToggleButton, } from '@saas-ui-pro/react' `})}),` `,(0,n.jsx)(o.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsxs)(o.p,{children:["The Toolbar can be used in combination with the ",(0,n.jsx)(o.code,{children:"Page"})," component or standalone in other parts of your app that requires a group of controls or actions."]}),` `,(0,n.jsx)(o.h3,{id:"basic",children:"Basic"}),` `,(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-jsx",children:`import { Spacer } from '@chakra-ui/react' import { FiAlignLeft, FiAlignCenter, FiAlignRight } from 'react-icons/fi' import { FiBold, FiItalic, FiUnderline, FiLink } from 'react-icons/fi' import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleGroup, ToolbarToggleButton, } from '@saas-ui-pro/react' export default function BasicToolbar() { return ( } label="Align left" value="left" /> } label="Align center" value="center" /> } label="Align right" value="right" /> } label="Bold" value="bold" /> } label="Italic" value="italic" /> } label="Underline" value="underline" /> } label="Create link" /> ) } `})}),` `,(0,n.jsx)(o.h3,{id:"sizes",children:"Sizes"}),` `,(0,n.jsxs)(o.p,{children:["Toolbar supports the following sizes, ",(0,n.jsx)(o.code,{children:"xs"}),", ",(0,n.jsx)(o.code,{children:"sm"}),", ",(0,n.jsx)(o.code,{children:"md"}),", ",(0,n.jsx)(o.code,{children:"lg"}),"."]}),` `,(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-jsx",children:`import { Spacer } from '@chakra-ui/react' import { FiAlignLeft, FiAlignCenter, FiAlignRight } from 'react-icons/fi' import { FiBold, FiItalic, FiUnderline, FiLink } from 'react-icons/fi' import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleGroup, ToolbarToggleButton, } from '@saas-ui-pro/react' export default function Sizes() { return ( } label="Align left" value="left" /> } label="Align center" value="center" /> } label="Align right" value="right" /> } label="Bold" value="bold" /> } label="Italic" value="italic" /> } label="Underline" value="underline" /> } label="Create link" /> ) } `})})]})}function d(e={}){let{wrapper:o}=e.components||{};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}function A(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return F(x);})(); ;return Component;