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

Flexible and customizable React UI components for Frank Authentication

{"version":3,"file":"divider.cjs","sources":["../../../../../src/components/ui/divider/divider.tsx"],"sourcesContent":["import type { StyledProps } from \"@/theme/styled\";\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\n\nimport { useTheme } from \"@/theme/context\";\nimport React from \"react\";\n\nexport interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Divider orientation */\n\torientation?: \"horizontal\" | \"vertical\";\n\t/** Divider color */\n\tcolor?:\n\t\t| \"primary\"\n\t\t| \"secondary\"\n\t\t| \"success\"\n\t\t| \"warning\"\n\t\t| \"danger\"\n\t\t| \"default\";\n\t/** Divider size (thickness) */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\t/** Content to display in the middle of the divider */\n\tchildren?: React.ReactNode;\n\t/** Alignment of the middle content */\n\tcontentAlign?: \"start\" | \"center\" | \"end\";\n\t/** Custom class name */\n\tclassName?: string;\n\t/** Custom styles */\n\tcss?: any;\n}\n\ntype StyledDividerProps = StyledProps<DividerProps>;\n\nconst getDividerColorStyles = (props: StyledDividerProps) => {\n\tconst { theme, color = \"default\" } = props;\n\n\tswitch (color) {\n\t\tcase \"primary\":\n\t\t\treturn css`\n\t\t\t\tbackground-color: ${theme.colors.primary[500]};\n\t\t\t`;\n\t\tcase \"secondary\":\n\t\t\treturn css`\n\t\t\t\tbackground-color: ${theme.colors.secondary[500]};\n\t\t\t`;\n\t\tcase \"success\":\n\t\t\treturn css`\n\t\t\t\tbackground-color: ${theme.colors.success[500]};\n\t\t\t`;\n\t\tcase \"warning\":\n\t\t\treturn css`\n\t\t\t\tbackground-color: ${theme.colors.warning[500]};\n\t\t\t`;\n\t\tcase \"danger\":\n\t\t\treturn css`\n\t\t\t\tbackground-color: ${theme.colors.danger[500]};\n\t\t\t`;\n\t\tdefault:\n\t\t\treturn css`\n\t\t\t\tbackground-color: ${theme.colors.border.primary};\n\t\t\t`;\n\t}\n};\n\nconst getDividerSizeStyles = (props: StyledDividerProps) => {\n\tconst { size = \"md\", orientation = \"horizontal\" } = props;\n\n\tconst sizeMap = {\n\t\tsm: \"1px\",\n\t\tmd: \"2px\",\n\t\tlg: \"3px\",\n\t};\n\n\tconst thickness = sizeMap[size];\n\n\tif (orientation === \"vertical\") {\n\t\treturn css`\n\t\t\twidth: ${thickness};\n\t\t\theight: auto;\n\t\t\tmin-height: 100%;\n\t\t`;\n\t}\n\n\treturn css`\n\t\theight: ${thickness};\n\t\twidth: 100%;\n\t`;\n};\n\n// Simple divider without content\nconst StyledDivider = styled.div<StyledDividerProps>`\n\tborder: none;\n\tmargin: 0;\n\tflex-shrink: 0;\n\n\t${getDividerColorStyles}\n\t${getDividerSizeStyles}\n\n\t\t/* Custom CSS prop */\n\t${(props) => props.css}\n`;\n\n// Container for divider with content\nconst DividerWithContentContainer = styled.div<\n\tStyledDividerProps & { contentAlign: \"start\" | \"center\" | \"end\" }\n>`\n  display: flex;\n  align-items: center;\n  width: 100%;\n  \n  ${(props) =>\n\t\tprops.orientation === \"vertical\" &&\n\t\tcss`\n    flex-direction: column;\n    height: 100%;\n    width: auto;\n  `}\n\n  ${(props) => {\n\t\tconst justifyContent = {\n\t\t\tstart: \"flex-start\",\n\t\t\tcenter: \"center\",\n\t\t\tend: \"flex-end\",\n\t\t}[props.contentAlign];\n\n\t\treturn css`\n      justify-content: ${justifyContent};\n    `;\n\t}}\n\n  /* Custom CSS prop */\n  ${(props) => props.css}\n`;\n\n// Divider line segments (before and after content)\nconst DividerSegment = styled.div<\n\tStyledDividerProps & { isFlexible?: boolean }\n>`\n  border: none;\n  margin: 0;\n  flex-shrink: 0;\n\n  ${getDividerColorStyles}\n  ${getDividerSizeStyles}\n\n  ${(props) =>\n\t\tprops.isFlexible &&\n\t\tcss`\n    flex: 1;\n  `}\n`;\n\n// Content wrapper\nconst DividerContent = styled.div<StyledDividerProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ${(props) =>\n\t\tprops.orientation === \"vertical\"\n\t\t\t? `${props.theme.spacing[2]} 0`\n\t\t\t: `0 ${props.theme.spacing[2]}`};\n  background-color: ${(props) => props.theme.colors.background.primary};\n  color: ${(props) => props.theme.colors.text.secondary};\n  font-size: ${(props) => props.theme.fontSizes.sm};\n  font-weight: ${(props) => props.theme.fontWeights.medium};\n  white-space: nowrap;\n  flex-shrink: 0;\n\n  /* Add subtle styling for text content */\n  ${(props) =>\n\t\ttypeof props.children === \"string\" &&\n\t\tcss`\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  `}\n`;\n\nexport const Divider = React.forwardRef<HTMLDivElement, DividerProps>(\n\t(\n\t\t{\n\t\t\torientation = \"horizontal\",\n\t\t\tcolor = \"default\",\n\t\t\tsize = \"md\",\n\t\t\tchildren,\n\t\t\tcontentAlign = \"center\",\n\t\t\tclassName,\n\t\t\tcss,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { theme } = useTheme();\n\n\t\t// If no content, render simple divider\n\t\tif (!children) {\n\t\t\tconst dividerProps = {\n\t\t\t\t...props,\n\t\t\t\torientation,\n\t\t\t\tcolor,\n\t\t\t\tsize,\n\t\t\t\tclassName,\n\t\t\t\tcss,\n\t\t\t\trole: \"separator\",\n\t\t\t\t\"aria-orientation\": orientation,\n\t\t\t};\n\n\t\t\treturn <StyledDivider theme={theme} ref={ref} {...dividerProps} />;\n\t\t}\n\n\t\t// Render divider with content\n\t\tconst containerProps = {\n\t\t\t...props,\n\t\t\torientation,\n\t\t\tcolor,\n\t\t\tsize,\n\t\t\tcontentAlign,\n\t\t\tclassName,\n\t\t\tcss,\n\t\t\trole: \"separator\",\n\t\t\t\"aria-orientation\": orientation,\n\t\t};\n\n\t\tconst segmentProps = {\n\t\t\torientation,\n\t\t\tcolor,\n\t\t\tsize,\n\t\t\ttheme,\n\t\t};\n\n\t\tconst contentProps = {\n\t\t\torientation,\n\t\t\ttheme,\n\t\t\tchildren,\n\t\t};\n\n\t\t// For center alignment, both segments are flexible\n\t\t// For start/end alignment, only one segment is flexible\n\t\tconst beforeFlexible = contentAlign === \"center\" || contentAlign === \"end\";\n\t\tconst afterFlexible = contentAlign === \"center\" || contentAlign === \"start\";\n\n\t\treturn (\n\t\t\t<DividerWithContentContainer theme={theme} ref={ref} {...containerProps}>\n\t\t\t\t{/* Before segment */}\n\t\t\t\t{(contentAlign === \"center\" || contentAlign === \"end\") && (\n\t\t\t\t\t<DividerSegment {...segmentProps} isFlexible={beforeFlexible} />\n\t\t\t\t)}\n\n\t\t\t\t{/* Content */}\n\t\t\t\t<DividerContent {...contentProps} />\n\n\t\t\t\t{/* After segment */}\n\t\t\t\t{(contentAlign === \"center\" || contentAlign === \"start\") && (\n\t\t\t\t\t<DividerSegment {...segmentProps} isFlexible={afterFlexible} />\n\t\t\t\t)}\n\t\t\t</DividerWithContentContainer>\n\t\t);\n\t},\n);\n\nDivider.displayName = \"Divider\";\n"],"names":["getDividerColorStyles","props","theme","color","css","getDividerSizeStyles","size","orientation","thickness","StyledDivider","styled","DividerWithContentContainer","justifyContent","DividerSegment","DividerContent","Divider","React","children","contentAlign","className","ref","useTheme","dividerProps","jsx","containerProps","segmentProps","contentProps","beforeFlexible","afterFlexible","jsxs"],"mappings":"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"}