var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var D=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var r in e)t(n,r,{get:e[r],enumerable:!0})},o=(n,e,r,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of m(e))!g.call(n,a)&&a!==r&&t(n,a,{get:()=>e[a],enumerable:!(d=u(e,a))||d.enumerable});return n};var f=(n,e,r)=>(r=n!=null?p(v(n)):{},o(e||!n||!n.__esModule?t(r,"default",{value:n,enumerable:!0}):r,n)),b=n=>o(t({},"__esModule",{value:!0}),n);var l=D((N,c)=>{c.exports=_jsx_runtime});var L={};x(L,{default:()=>h,frontmatter:()=>j});var i=f(l()),j={id:"divider",title:"Divider",package:"@saas-ui/core",description:"Dividers are used to visually separate content in a list or group."};function s(n){let e={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...n.components},{ComponentLinks:r}=e;return r||k("ComponentLinks",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.p,{children:"Dividers are used to visually separate content in a list or group."}),` `,(0,i.jsx)(r,{theme:{componentName:"divider"},github:{url:"https://github.com/saas-ui/saas-ui/blob/main/packages/saas-ui-core/src/divider"},npm:{package:"@saas-ui/core"}}),` `,(0,i.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:`import { Divider, DividerLabel } from '@saas-ui/react' `})}),` `,(0,i.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,i.jsxs)(e.p,{children:["The ",(0,i.jsx)(e.code,{children:"Divider"})," displays a thin horizontal or vertical line, and renders a ",(0,i.jsx)(e.code,{children:"hr"}),` tag.`]}),` `,(0,i.jsx)(e.h2,{id:"basic",children:"Basic"}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,i.jsx)(e.h2,{id:"variants",children:"Variants"}),` `,(0,i.jsxs)(e.p,{children:["The ",(0,i.jsx)(e.code,{children:"Divider"})," component comes with 2 variants: ",(0,i.jsx)(e.code,{children:"solid"})," and ",(0,i.jsx)(e.code,{children:"dashed"}),"."]}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,i.jsx)(e.h2,{id:"label",children:"Label"}),` `,(0,i.jsxs)(e.p,{children:["You can add a text label that will be aligned in the center of the ",(0,i.jsx)(e.code,{children:"Divider"}),`, this will render a `,(0,i.jsx)(e.code,{children:"div"})," tag."]}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:` Divider `})}),` `,(0,i.jsx)(e.h3,{id:"divider-orientation",children:"Divider Orientation"}),` `,(0,i.jsxs)(e.p,{children:["Pass the ",(0,i.jsx)(e.code,{children:"orientation"})," prop and set it to either ",(0,i.jsx)(e.code,{children:"horizontal"})," or ",(0,i.jsx)(e.code,{children:"vertical"}),". The default is ",(0,i.jsx)(e.code,{children:"horizontal"}),"."]}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,i.jsx)(e.p,{children:`If the vertical orientation is used, make sure that the parent element is assigned a height.`}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:`import { Center } from '@chakra-ui/react' import { Divider } from '@saas-ui/react' export default function Vertical() { return ( ) } `})}),` `,(0,i.jsx)(e.p,{children:"Vertical with a label."}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:`import { Center } from '@chakra-ui/react' import { Divider, DividerLabel } from '@saas-ui/react' export default function VerticalWithLabel() { return ( Label ) } `})}),` `,(0,i.jsx)(e.h2,{id:"composition",children:"Composition"}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:`import { Stack, Text } from '@chakra-ui/react' import { Divider, DividerLabel } from '@saas-ui/react' export default function Composition() { return ( Saas UI ) } `})})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(s,{...n})}):s(n)}function k(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(L);})(); ;return Component;