var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var s=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var h=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),f=(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 T(o))!p.call(e,r)&&r!==l&&i(e,r,{get:()=>o[r],enumerable:!(t=b(o,r))||t.enumerable});return e};var m=(e,o,l)=>(l=e!=null?d(s(e)):{},a(o||!e||!e.__esModule?i(l,"default",{value:e,enumerable:!0}):l,e)),B=e=>a(i({},"__esModule",{value:!0}),e);var g=h((C,c)=>{c.exports=_jsx_runtime});var k={};f(k,{default:()=>A,frontmatter:()=>F});var n=m(g()),F={id:"toolbar",title:"Toolbar",description:"A container for grouping a set of controls, like buttons, toggles or menus."};function u(e){let o=Object.assign({h2:"h2",ul:"ul",li:"li",code:"code",pre:"pre",p:"p",h3:"h3"},e.components),{ComponentLinks:l}=o;return l||x("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 v(e={}){let{wrapper:o}=e.components||{};return o?(0,n.jsx)(o,Object.assign({},e,{children:(0,n.jsx)(u,e)})):u(e)}var A=v;function x(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return B(k);})(); ;return Component;