@frank-auth/react/dist/cjs/components/ui/divider/divider.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("@emotion/react"),w=require("@emotion/styled"),j=require("../../../theme/context.cjs"),D=require("react"),g=e=>e&&e.__esModule?e:{default:e},i=g(w),C=g(D),p=e=>{const{theme:t,color:o="default"}=e;switch(o){case"primary":return s.css`
				background-color: ${t.colors.primary[500]};
			`;case"secondary":return s.css`
				background-color: ${t.colors.secondary[500]};
			`;case"success":return s.css`
				background-color: ${t.colors.success[500]};
			`;case"warning":return s.css`
				background-color: ${t.colors.warning[500]};
			`;case"danger":return s.css`
				background-color: ${t.colors.danger[500]};
			`;default:return s.css`
				background-color: ${t.colors.border.primary};
			`}},x=e=>{const{size:t="md",orientation:o="horizontal"}=e,r={sm:"1px",md:"2px",lg:"3px"}[t];return o==="vertical"?s.css`
			width: ${r};
			height: auto;
			min-height: 100%;
		`:s.css`
		height: ${r};
		width: 100%;
	`},_=i.default.div`
	border: none;
	margin: 0;
	flex-shrink: 0;

	${p}
	${x}

		/* Custom CSS prop */
	${e=>e.css}
`,z=i.default.div`
  display: flex;
  align-items: center;
  width: 100%;
  
  ${e=>e.orientation==="vertical"&&s.css`
    flex-direction: column;
    height: 100%;
    width: auto;
  `}

  ${e=>{const t={start:"flex-start",center:"center",end:"flex-end"}[e.contentAlign];return s.css`
      justify-content: ${t};
    `}}

  /* Custom CSS prop */
  ${e=>e.css}
`,h=i.default.div`
  border: none;
  margin: 0;
  flex-shrink: 0;

  ${p}
  ${x}

  ${e=>e.isFlexible&&s.css`
    flex: 1;
  `}
`,q=i.default.div`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${e=>e.orientation==="vertical"?`${e.theme.spacing[2]} 0`:`0 ${e.theme.spacing[2]}`};
  background-color: ${e=>e.theme.colors.background.primary};
  color: ${e=>e.theme.colors.text.secondary};
  font-size: ${e=>e.theme.fontSizes.sm};
  font-weight: ${e=>e.theme.fontWeights.medium};
  white-space: nowrap;
  flex-shrink: 0;

  /* Add subtle styling for text content */
  ${e=>typeof e.children=="string"&&s.css`
    text-transform: uppercase;
    letter-spacing: 0.05em;
  `}
`,$=C.default.forwardRef(({orientation:e="horizontal",color:t="default",size:o="md",children:a,contentAlign:r="center",className:d,css:l,...u},f)=>{const{theme:n}=j.useTheme();if(!a){const S={...u,orientation:e,color:t,size:o,className:d,css:l,role:"separator","aria-orientation":e};return c.jsx(_,{theme:n,ref:f,...S})}const y={...u,orientation:e,color:t,size:o,contentAlign:r,className:d,css:l,role:"separator","aria-orientation":e},m={orientation:e,color:t,size:o,theme:n},b={orientation:e,theme:n,children:a},v=r==="center"||r==="end",k=r==="center"||r==="start";return c.jsxs(z,{theme:n,ref:f,...y,children:[(r==="center"||r==="end")&&c.jsx(h,{...m,isFlexible:v}),c.jsx(q,{...b}),(r==="center"||r==="start")&&c.jsx(h,{...m,isFlexible:k})]})});$.displayName="Divider";exports.Divider=$;
//# sourceMappingURL=divider.cjs.map