@frank-auth/react/dist/cjs/components/auth/magic-link/magic-link.cjs.map

Flexible and customizable React UI components for Frank Authentication

{"version":3,"file":"magic-link.cjs","sources":["../../../../../src/components/auth/magic-link/magic-link.tsx"],"sourcesContent":["import { useTheme } from \"@/theme/context\";\nimport { type StyledProps, getColorVariant } from \"@/theme/styled\";\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport React from \"react\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n\t/** Badge variant */\n\tvariant?: \"solid\" | \"flat\" | \"bordered\" | \"shadow\" | \"dot\";\n\t/** Badge color theme */\n\tcolor?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\";\n\t/** Badge size */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\t/** Badge content */\n\tcontent?: React.ReactNode | number | string;\n\t/** Maximum count to display (shows count+ when exceeded) */\n\tmax?: number;\n\t/** Show badge as dot without content */\n\tisDot?: boolean;\n\t/** Hide badge when content is 0 or empty */\n\tshowZero?: boolean;\n\t/** Badge placement relative to children */\n\tplacement?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n\t/** Disable badge */\n\tisDisabled?: boolean;\n\t/** Badge shape */\n\tshape?: \"rectangle\" | \"circle\";\n\t/** Custom class name */\n\tclassName?: string;\n\t/** Custom styles */\n\tcss?: any;\n\t/** Children to wrap with badge */\n\tchildren?: React.ReactNode;\n}\n\ntype StyledBadgeProps = StyledProps<BadgeProps>;\n\nconst getBadgeVariantStyles = (props: StyledBadgeProps) => {\n\tconst { theme, variant = \"solid\", color = \"primary\", isDisabled } = props;\n\tconst baseColor = getColorVariant(theme, color, 500);\n\tconst lightColor = getColorVariant(theme, color, 50);\n\tconst darkColor = getColorVariant(theme, color, 700);\n\n\tif (isDisabled) {\n\t\treturn css`\n      opacity: 0.5;\n      cursor: not-allowed;\n    `;\n\t}\n\n\tswitch (variant) {\n\t\tcase \"solid\":\n\t\t\treturn css`\n        background-color: ${baseColor};\n        color: ${theme.colors.text.inverse};\n        border: 1px solid transparent;\n      `;\n\n\t\tcase \"flat\":\n\t\t\treturn css`\n        background-color: ${getColorVariant(theme, color, 100)};\n        color: ${baseColor};\n        border: 1px solid transparent;\n      `;\n\n\t\tcase \"bordered\":\n\t\t\treturn css`\n        background-color: ${theme.colors.background.primary};\n        color: ${baseColor};\n        border: 1px solid ${baseColor};\n      `;\n\n\t\tcase \"shadow\":\n\t\t\treturn css`\n        background-color: ${baseColor};\n        color: ${theme.colors.text.inverse};\n        border: 1px solid transparent;\n        box-shadow: ${theme.shadows.sm};\n      `;\n\n\t\tcase \"dot\":\n\t\t\treturn css`\n        background-color: ${baseColor};\n        border: 2px solid ${theme.colors.background.primary};\n        width: 8px;\n        height: 8px;\n        padding: 0;\n        min-width: 8px;\n      `;\n\n\t\tdefault:\n\t\t\treturn css``;\n\t}\n};\n\nconst getBadgeSizeStyles = (props: StyledBadgeProps) => {\n\tconst { theme, size = \"md\", variant, shape = \"rectangle\" } = props;\n\n\tif (variant === \"dot\") {\n\t\tswitch (size) {\n\t\t\tcase \"sm\":\n\t\t\t\treturn css`\n          width: 6px;\n          height: 6px;\n          min-width: 6px;\n        `;\n\t\t\tcase \"md\":\n\t\t\t\treturn css`\n          width: 8px;\n          height: 8px;\n          min-width: 8px;\n        `;\n\t\t\tcase \"lg\":\n\t\t\t\treturn css`\n          width: 10px;\n          height: 10px;\n          min-width: 10px;\n        `;\n\t\t}\n\t}\n\n\tconst isCircle = shape === \"circle\";\n\n\tswitch (size) {\n\t\tcase \"sm\":\n\t\t\treturn css`\n        min-width: ${isCircle ? theme.spacing[4] : theme.spacing[4]};\n        height: ${theme.spacing[4]};\n        padding: ${isCircle ? \"0\" : `0 ${theme.spacing[1]}`};\n        font-size: ${theme.fontSizes.xs};\n      `;\n\t\tcase \"md\":\n\t\t\treturn css`\n        min-width: ${isCircle ? theme.spacing[5] : theme.spacing[5]};\n        height: ${theme.spacing[5]};\n        padding: ${isCircle ? \"0\" : `0 ${theme.spacing[2]}`};\n        font-size: ${theme.fontSizes.xs};\n      `;\n\t\tcase \"lg\":\n\t\t\treturn css`\n        min-width: ${isCircle ? theme.spacing[6] : theme.spacing[6]};\n        height: ${theme.spacing[6]};\n        padding: ${isCircle ? \"0\" : `0 ${theme.spacing[2]}`};\n        font-size: ${theme.fontSizes.sm};\n      `;\n\t\tdefault:\n\t\t\treturn css``;\n\t}\n};\n\nconst getBadgeShapeStyles = (props: StyledBadgeProps) => {\n\tconst { theme, shape = \"rectangle\", variant } = props;\n\n\tif (variant === \"dot\") {\n\t\treturn css`border-radius: ${theme.borderRadius.full};`;\n\t}\n\n\tswitch (shape) {\n\t\tcase \"circle\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.full};`;\n\t\tcase \"rectangle\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.sm};`;\n\t\tdefault:\n\t\t\treturn css`border-radius: ${theme.borderRadius.sm};`;\n\t}\n};\n\nconst StyledBadge = styled.span<StyledBadgeProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  font-weight: ${(props) => props.theme.fontWeights.medium};\n  line-height: ${(props) => props.theme.lineHeights.tight};\n  white-space: nowrap;\n  user-select: none;\n  transition: all ${(props) => props.theme.transitions.normal};\n  box-sizing: border-box;\n\n  ${getBadgeVariantStyles}\n  ${getBadgeSizeStyles}\n  ${getBadgeShapeStyles}\n\n  /* Custom CSS prop */\n  ${(props) => props.css}\n`;\n\nconst BadgeWrapper = styled.span<{ placement: string }>`\n  position: relative;\n  display: inline-flex;\n\n  ${StyledBadge} {\n    position: absolute;\n    z-index: ${(props) => props.theme.zIndex.docked};\n    \n    ${(props) => {\n\t\t\tswitch (props.placement) {\n\t\t\t\tcase \"top-right\":\n\t\t\t\t\treturn css`\n            top: 0;\n            right: 0;\n            transform: translate(50%, -50%);\n          `;\n\t\t\t\tcase \"top-left\":\n\t\t\t\t\treturn css`\n            top: 0;\n            left: 0;\n            transform: translate(-50%, -50%);\n          `;\n\t\t\t\tcase \"bottom-right\":\n\t\t\t\t\treturn css`\n            bottom: 0;\n            right: 0;\n            transform: translate(50%, 50%);\n          `;\n\t\t\t\tcase \"bottom-left\":\n\t\t\t\t\treturn css`\n            bottom: 0;\n            left: 0;\n            transform: translate(-50%, 50%);\n          `;\n\t\t\t\tdefault:\n\t\t\t\t\treturn css`\n            top: 0;\n            right: 0;\n            transform: translate(50%, -50%);\n          `;\n\t\t\t}\n\t\t}}\n  }\n`;\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tcontent,\n\t\t\tvariant = \"solid\",\n\t\t\tcolor = \"primary\",\n\t\t\tsize = \"md\",\n\t\t\tmax = 99,\n\t\t\tisDot = false,\n\t\t\tshowZero = false,\n\t\t\tplacement = \"top-right\",\n\t\t\tisDisabled = false,\n\t\t\tshape = \"rectangle\",\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// Determine if badge should be shown\n\t\tconst shouldShowBadge = () => {\n\t\t\tif (isDot) return true;\n\t\t\tif (content === 0 || content === \"0\") return showZero;\n\t\t\treturn content !== undefined && content !== null && content !== \"\";\n\t\t};\n\n\t\t// Format badge content\n\t\tconst getBadgeContent = () => {\n\t\t\tif (isDot || variant === \"dot\") return null;\n\n\t\t\tif (typeof content === \"number\") {\n\t\t\t\treturn content > max ? `${max}+` : content.toString();\n\t\t\t}\n\n\t\t\treturn content;\n\t\t};\n\n\t\tconst badgeProps = {\n\t\t\t...props,\n\t\t\tvariant: isDot ? \"dot\" : variant,\n\t\t\tcolor,\n\t\t\tsize,\n\t\t\tshape: isDot ? \"circle\" : shape,\n\t\t\tisDisabled,\n\t\t\tclassName,\n\t\t\tcss,\n\t\t};\n\n\t\tconst badgeElement = shouldShowBadge() ? (\n\t\t\t<StyledBadge theme={theme} ref={ref} {...badgeProps}>\n\t\t\t\t{getBadgeContent()}\n\t\t\t</StyledBadge>\n\t\t) : null;\n\n\t\t// If no children, return just the badge\n\t\tif (!children) {\n\t\t\treturn badgeElement;\n\t\t}\n\n\t\t// If children exist, wrap them with positioned badge\n\t\treturn (\n\t\t\t<BadgeWrapper theme={theme} placement={placement}>\n\t\t\t\t{children}\n\t\t\t\t{badgeElement}\n\t\t\t</BadgeWrapper>\n\t\t);\n\t},\n);\n\nBadge.displayName = \"Badge\";\n"],"names":["getBadgeVariantStyles","props","theme","variant","color","isDisabled","baseColor","getColorVariant","css","getBadgeSizeStyles","size","shape","isCircle","getBadgeShapeStyles","StyledBadge","styled","BadgeWrapper","Badge","React","children","content","max","isDot","showZero","placement","className","ref","useTheme","shouldShowBadge","getBadgeContent","badgeProps","badgeElement","jsx","jsxs"],"mappings":"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"}