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

Flexible and customizable React UI components for Frank Authentication

{"version":3,"file":"alert.cjs","sources":["../../../../../src/components/ui/alert/alert.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 AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Alert variant */\n\tvariant?: \"solid\" | \"bordered\" | \"light\" | \"flat\";\n\t/** Alert color theme */\n\tcolor?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\";\n\t/** Alert radius */\n\tradius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\t/** Alert title */\n\ttitle?: string;\n\t/** Alert description */\n\tdescription?: string;\n\t/** Custom icon */\n\ticon?: React.ReactNode;\n\t/** Hide default icon */\n\thideIcon?: boolean;\n\t/** Closable alert */\n\tisClosable?: boolean;\n\t/** Close callback */\n\tonClose?: () => void;\n\t/** Visible state */\n\tisVisible?: boolean;\n\t/** Custom class name */\n\tclassName?: string;\n\t/** Custom styles */\n\tcss?: any;\n}\n\ntype StyledAlertProps = StyledProps<AlertProps>;\n\nconst getAlertVariantStyles = (props: StyledAlertProps) => {\n\tconst { theme, variant = \"flat\", color = \"primary\" } = props;\n\tconst baseColor = getColorVariant(theme, color, 500);\n\tconst lightColor = getColorVariant(theme, color, 50);\n\tconst borderColor = getColorVariant(theme, color, 200);\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 ${baseColor};\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 \"light\":\n\t\t\treturn css`\n        background-color: ${lightColor};\n        color: ${getColorVariant(theme, color, 700)};\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 ${borderColor};\n      `;\n\n\t\tdefault:\n\t\t\treturn css``;\n\t}\n};\n\nconst getAlertRadiusStyles = (props: StyledAlertProps) => {\n\tconst { theme, radius = \"md\" } = props;\n\n\tswitch (radius) {\n\t\tcase \"none\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.none};`;\n\t\tcase \"sm\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.sm};`;\n\t\tcase \"md\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.md};`;\n\t\tcase \"lg\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.lg};`;\n\t\tcase \"xl\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.xl};`;\n\t\tdefault:\n\t\t\treturn css`border-radius: ${theme.borderRadius.md};`;\n\t}\n};\n\nconst StyledAlert = styled.div<StyledAlertProps & { isVisible?: boolean }>`\n  display: ${(props) => (props.isVisible === false ? \"none\" : \"flex\")};\n  align-items: flex-start;\n  gap: ${(props) => props.theme.spacing[3]};\n  padding: ${(props) => props.theme.spacing[4]};\n  position: relative;\n  transition: all ${(props) => props.theme.transitions.normal};\n\n  ${getAlertVariantStyles}\n  ${getAlertRadiusStyles}\n\n  /* Custom CSS prop */\n  ${(props) => props.css}\n`;\n\nconst IconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  margin-top: 2px;\n`;\n\nconst ContentWrapper = styled.div<StyledProps>`\n  display: flex;\n  flex-direction: column;\n  gap: ${(props) => props.theme.spacing[1]};\n  flex: 1;\n  min-width: 0;\n`;\n\nconst Title = styled.div<StyledProps>`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: ${(props) => props.theme.fontSizes.base};\n  line-height: ${(props) => props.theme.lineHeights.tight};\n`;\n\nconst Description = styled.div<StyledProps>`\n  font-size: ${(props) => props.theme.fontSizes.sm};\n  line-height: ${(props) => props.theme.lineHeights.normal};\n  opacity: 0.9;\n`;\n\nconst CloseButton = styled.button<StyledProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  color: inherit;\n  opacity: 0.7;\n  transition: opacity ${(props) => props.theme.transitions.fast};\n  width: 18px;\n  height: 18px;\n  flex-shrink: 0;\n  margin-top: 1px;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &:focus {\n    outline: none;\n  }\n`;\n\n// Default icons for different alert types\nconst CheckCircleIcon = () => (\n\t// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>\n\t<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n\t\t<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" />\n\t</svg>\n);\n\nconst InfoIcon = () => (\n\t// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>\n\t<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n\t\t<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\" />\n\t</svg>\n);\n\nconst WarningIcon = () => (\n\t// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>\n\t<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n\t\t<path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n\t</svg>\n);\n\nconst ErrorIcon = () => (\n\t// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>\n\t<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n\t\t<path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\" />\n\t</svg>\n);\n\nconst CloseIcon = () => (\n\t// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>\n\t<svg\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke=\"currentColor\"\n\t\tstrokeWidth=\"2\"\n\t\twidth=\"18\"\n\t\theight=\"18\"\n\t>\n\t\t<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n\t\t<line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n\t</svg>\n);\n\nconst getDefaultIcon = (color: string) => {\n\tswitch (color) {\n\t\tcase \"success\":\n\t\t\treturn <CheckCircleIcon />;\n\t\tcase \"warning\":\n\t\t\treturn <WarningIcon />;\n\t\tcase \"danger\":\n\t\t\treturn <ErrorIcon />;\n\t\t// case \"primary\":\n\t\t// case \"secondary\":\n\t\tdefault:\n\t\t\treturn <InfoIcon />;\n\t}\n};\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tvariant = \"flat\",\n\t\t\tcolor = \"primary\",\n\t\t\tradius = \"md\",\n\t\t\ttitle,\n\t\t\tdescription,\n\t\t\ticon,\n\t\t\thideIcon = false,\n\t\t\tisClosable = false,\n\t\t\tonClose,\n\t\t\tisVisible = true,\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\tconst alertProps = {\n\t\t\t...props,\n\t\t\tvariant,\n\t\t\tcolor,\n\t\t\tradius,\n\t\t\tisVisible,\n\t\t\tclassName,\n\t\t\tcss,\n\t\t};\n\n\t\tconst handleClose = () => {\n\t\t\tonClose?.();\n\t\t};\n\n\t\tconst displayIcon = icon || getDefaultIcon(color);\n\t\tconst hasContent = title || description || children;\n\n\t\treturn (\n\t\t\t<StyledAlert theme={theme} ref={ref} {...alertProps}>\n\t\t\t\t{!hideIcon && <IconWrapper>{displayIcon}</IconWrapper>}\n\n\t\t\t\t{hasContent && (\n\t\t\t\t\t<ContentWrapper theme={theme}>\n\t\t\t\t\t\t{title && <Title theme={theme}>{title}</Title>}\n\t\t\t\t\t\t{description && (\n\t\t\t\t\t\t\t<Description theme={theme}>{description}</Description>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</ContentWrapper>\n\t\t\t\t)}\n\n\t\t\t\t{isClosable && (\n\t\t\t\t\t<CloseButton\n\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\taria-label=\"Close alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<CloseIcon />\n\t\t\t\t\t</CloseButton>\n\t\t\t\t)}\n\t\t\t</StyledAlert>\n\t\t);\n\t},\n);\n\nAlert.displayName = \"Alert\";\n"],"names":["getAlertVariantStyles","props","theme","variant","color","baseColor","getColorVariant","lightColor","borderColor","css","getAlertRadiusStyles","radius","StyledAlert","styled","IconWrapper","ContentWrapper","Title","Description","CloseButton","CheckCircleIcon","jsx","InfoIcon","WarningIcon","ErrorIcon","CloseIcon","jsxs","getDefaultIcon","Alert","React","children","title","description","icon","hideIcon","isClosable","onClose","isVisible","className","ref","useTheme","alertProps","handleClose","displayIcon","hasContent"],"mappings":"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"}