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

Flexible and customizable React UI components for Frank Authentication

{"version":3,"file":"card.cjs","sources":["../../../../../src/components/ui/card/card.tsx"],"sourcesContent":["import { useTheme } from \"@/theme/context\";\nimport type { StyledProps } from \"@/theme/styled\";\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport React from \"react\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Card variant */\n\tvariant?: \"elevated\" | \"bordered\" | \"shadow\" | \"flat\";\n\t/** Card radius */\n\tradius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\t/** Card shadow level */\n\tshadow?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\t/** Full width card */\n\tfullWidth?: boolean;\n\t/** Hoverable card */\n\tisHoverable?: boolean;\n\t/** Pressable card */\n\tisPressable?: boolean;\n\t/** Disabled state */\n\tisDisabled?: boolean;\n\t/** Custom class name */\n\tclassName?: string;\n\t/** Custom styles */\n\tcss?: any;\n}\n\ntype StyledCardProps = StyledProps<CardProps>;\n\nconst getCardVariantStyles = (props: StyledCardProps) => {\n\tconst { theme, variant = \"elevated\", shadow = \"sm\" } = props;\n\n\tswitch (variant) {\n\t\tcase \"elevated\":\n\t\t\treturn css`\n        background-color: ${theme.colors.background.primary};\n        border: 1px solid transparent;\n        box-shadow: ${theme.shadows[shadow]};\n      `;\n\n\t\tcase \"bordered\":\n\t\t\treturn css`\n        background-color: ${theme.colors.background.primary};\n        border: 1px solid ${theme.colors.border.primary};\n        box-shadow: none;\n      `;\n\n\t\tcase \"shadow\":\n\t\t\treturn css`\n        background-color: ${theme.colors.background.primary};\n        border: 1px solid transparent;\n        box-shadow: ${theme.shadows[shadow]};\n      `;\n\n\t\tcase \"flat\":\n\t\t\treturn css`\n        background-color: ${theme.colors.background.secondary};\n        border: 1px solid transparent;\n        box-shadow: none;\n      `;\n\n\t\tdefault:\n\t\t\treturn css``;\n\t}\n};\n\nconst getCardRadiusStyles = (props: StyledCardProps) => {\n\tconst { theme, radius = \"lg\" } = 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.lg};`;\n\t}\n};\n\nconst StyledCard = styled.div<StyledCardProps>`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  width: ${(props) => (props.fullWidth ? \"100%\" : \"auto\")};\n  transition: all ${(props) => props.theme.transitions.normal};\n\n  ${getCardVariantStyles}\n  ${getCardRadiusStyles}\n\n  ${(props) =>\n\t\tprops.isHoverable &&\n\t\tcss`\n    cursor: pointer;\n    \n    &:hover {\n      transform: translateY(-2px);\n      box-shadow: ${props.theme.shadows.lg};\n    }\n  `}\n\n  ${(props) =>\n\t\tprops.isPressable &&\n\t\tcss`\n    cursor: pointer;\n    user-select: none;\n    \n    &:hover {\n      opacity: 0.9;\n    }\n    \n    &:active {\n      transform: scale(0.98);\n    }\n  `}\n\n  ${(props) =>\n\t\tprops.isDisabled &&\n\t\tcss`\n    opacity: 0.5;\n    cursor: not-allowed;\n    pointer-events: none;\n  `}\n\n  /* Custom CSS prop */\n  ${(props) => props.css}\n`;\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tvariant = \"elevated\",\n\t\t\tradius = \"lg\",\n\t\t\tshadow = \"sm\",\n\t\t\tfullWidth = false,\n\t\t\tisHoverable = false,\n\t\t\tisPressable = false,\n\t\t\tisDisabled = false,\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 cardProps = {\n\t\t\t...props,\n\t\t\tvariant,\n\t\t\tradius,\n\t\t\tshadow,\n\t\t\tfullWidth,\n\t\t\tisHoverable,\n\t\t\tisPressable,\n\t\t\tisDisabled,\n\t\t\tclassName,\n\t\t\tcss,\n\t\t};\n\n\t\treturn (\n\t\t\t<StyledCard theme={theme} ref={ref} {...cardProps}>\n\t\t\t\t{children}\n\t\t\t</StyledCard>\n\t\t);\n\t},\n);\n\nCard.displayName = \"Card\";\n\n// Card subcomponents\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n\tclassName?: string;\n\tcss?: any;\n}\n\nexport const CardHeader = styled.div<StyledProps<CardHeaderProps>>`\n  display: flex;\n  padding: ${(props) => props.theme.spacing[6]} ${(props) => props.theme.spacing[6]} 0;\n  flex-direction: column;\n  gap: ${(props) => props.theme.spacing[2]};\n\n  ${(props) => props.css}\n`;\n\nexport interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n\tclassName?: string;\n\tcss?: any;\n}\n\nexport const CardBody = styled.div<StyledProps<CardBodyProps>>`\n  display: flex;\n  padding: ${(props) => props.theme.spacing[6]};\n  flex-direction: column;\n  gap: ${(props) => props.theme.spacing[4]};\n  flex: 1;\n\n  ${(props) => props.css}\n`;\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n\tclassName?: string;\n\tcss?: any;\n}\n\nexport const CardFooter = styled.div<StyledProps<CardFooterProps>>`\n  display: flex;\n  padding: 0 ${(props) => props.theme.spacing[6]} ${(props) => props.theme.spacing[6]};\n  flex-direction: row;\n  align-items: center;\n  gap: ${(props) => props.theme.spacing[3]};\n\n  ${(props) => props.css}\n`;\n"],"names":["getCardVariantStyles","props","theme","variant","shadow","css","getCardRadiusStyles","radius","StyledCard","styled","Card","React","children","fullWidth","isHoverable","isPressable","isDisabled","className","ref","useTheme","cardProps","CardHeader","CardBody","CardFooter"],"mappings":"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"}