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

Flexible and customizable React UI components for Frank Authentication

{"version":3,"file":"chip.cjs","sources":["../../../../../src/components/ui/chip/chip.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 ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Chip variant */\n\tvariant?:\n\t\t| \"solid\"\n\t\t| \"bordered\"\n\t\t| \"light\"\n\t\t| \"flat\"\n\t\t| \"faded\"\n\t\t| \"shadow\"\n\t\t| \"dot\";\n\t/** Chip color theme */\n\tcolor?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\";\n\t/** Chip size */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\t/** Chip radius */\n\tradius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n\t/** Disabled state */\n\tisDisabled?: boolean;\n\t/** Closable chip with close button */\n\tisClosable?: boolean;\n\t/** Close button callback */\n\tonClose?: () => void;\n\t/** Start content (icon or avatar) */\n\tstartContent?: React.ReactNode;\n\t/** End content (icon) */\n\tendContent?: React.ReactNode;\n\t/** Custom class name */\n\tclassName?: string;\n\t/** Custom styles */\n\tcss?: any;\n}\n\ntype StyledChipProps = StyledProps<ChipProps>;\n\nconst getChipVariantStyles = (props: StyledChipProps) => {\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      pointer-events: none;\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 \"bordered\":\n\t\t\treturn css`\n        background-color: transparent;\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: ${darkColor};\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 \"faded\":\n\t\t\treturn css`\n        background-color: ${theme.colors.neutral[100]};\n        color: ${baseColor};\n        border: 1px solid ${theme.colors.neutral[200]};\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.md};\n      `;\n\n\t\tcase \"dot\":\n\t\t\treturn css`\n        background-color: ${theme.colors.background.secondary};\n        color: ${theme.colors.text.primary};\n        border: 1px solid ${theme.colors.border.primary};\n        position: relative;\n\n        &::before {\n          content: '';\n          position: absolute;\n          left: 8px;\n          top: 50%;\n          transform: translateY(-50%);\n          width: 6px;\n          height: 6px;\n          border-radius: 50%;\n          background-color: ${baseColor};\n        }\n      `;\n\n\t\tdefault:\n\t\t\treturn css``;\n\t}\n};\n\nconst getChipSizeStyles = (props: StyledChipProps) => {\n\tconst { theme, size = \"md\", variant } = props;\n\n\tconst dotPadding = variant === \"dot\" ? theme.spacing[5] : theme.spacing[3];\n\n\tswitch (size) {\n\t\tcase \"sm\":\n\t\t\treturn css`\n        height: ${theme.spacing[6]};\n        padding: 0 ${variant === \"dot\" ? theme.spacing[4] : theme.spacing[2]};\n        padding-left: ${variant === \"dot\" ? theme.spacing[4] : theme.spacing[2]};\n        font-size: ${theme.fontSizes.xs};\n        gap: ${theme.spacing[1]};\n      `;\n\t\tcase \"md\":\n\t\t\treturn css`\n        height: ${theme.spacing[8]};\n        padding: 0 ${variant === \"dot\" ? dotPadding : theme.spacing[3]};\n        padding-left: ${variant === \"dot\" ? dotPadding : theme.spacing[3]};\n        font-size: ${theme.fontSizes.sm};\n        gap: ${theme.spacing[2]};\n      `;\n\t\tcase \"lg\":\n\t\t\treturn css`\n        height: ${theme.spacing[10]};\n        padding: 0 ${variant === \"dot\" ? theme.spacing[6] : theme.spacing[4]};\n        padding-left: ${variant === \"dot\" ? theme.spacing[6] : theme.spacing[4]};\n        font-size: ${theme.fontSizes.base};\n        gap: ${theme.spacing[2]};\n      `;\n\t\tdefault:\n\t\t\treturn css``;\n\t}\n};\n\nconst getChipRadiusStyles = (props: StyledChipProps) => {\n\tconst { theme, radius = \"full\" } = 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 \"full\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.full};`;\n\t\tdefault:\n\t\t\treturn css`border-radius: ${theme.borderRadius.full};`;\n\t}\n};\n\nconst StyledChip = styled.div<StyledChipProps>`\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  position: relative;\n  transition: all ${(props) => props.theme.transitions.normal};\n\n  ${getChipVariantStyles}\n  ${getChipSizeStyles}\n  ${getChipRadiusStyles}\n\n  /* Custom CSS prop */\n  ${(props) => props.css}\n`;\n\nconst CloseButton = styled.button<\n\tStyledChipProps & { size?: \"sm\" | \"md\" | \"lg\" }\n>`\n  display: inline-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: ${(props) => {\n\t\tswitch (props.size) {\n\t\t\tcase \"sm\":\n\t\t\t\treturn \"14px\";\n\t\t\tcase \"lg\":\n\t\t\t\treturn \"18px\";\n\t\t\tdefault:\n\t\t\t\treturn \"16px\";\n\t\t}\n\t}};\n  height: ${(props) => {\n\t\tswitch (props.size) {\n\t\t\tcase \"sm\":\n\t\t\t\treturn \"14px\";\n\t\t\tcase \"lg\":\n\t\t\t\treturn \"18px\";\n\t\t\tdefault:\n\t\t\t\treturn \"16px\";\n\t\t}\n\t}};\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nconst CloseIcon = ({ size }: { size?: \"sm\" | \"md\" | \"lg\" }) => (\n\t// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>\n\t<svg\n\t\twidth=\"100%\"\n\t\theight=\"100%\"\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke=\"currentColor\"\n\t\tstrokeWidth=\"2\"\n\t\tstrokeLinecap=\"round\"\n\t\tstrokeLinejoin=\"round\"\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\nexport const Chip = React.forwardRef<HTMLDivElement, ChipProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tvariant = \"solid\",\n\t\t\tcolor = \"primary\",\n\t\t\tsize = \"md\",\n\t\t\tradius = \"full\",\n\t\t\tisDisabled = false,\n\t\t\tisClosable = false,\n\t\t\tonClose,\n\t\t\tstartContent,\n\t\t\tendContent,\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 chipProps = {\n\t\t\t...props,\n\t\t\tvariant,\n\t\t\tcolor,\n\t\t\tsize,\n\t\t\tradius,\n\t\t\tisDisabled,\n\t\t\tclassName,\n\t\t\tcss,\n\t\t};\n\n\t\tconst handleClose = (e: React.MouseEvent) => {\n\t\t\te.stopPropagation();\n\t\t\tonClose?.();\n\t\t};\n\n\t\treturn (\n\t\t\t<StyledChip theme={theme} ref={ref} {...chipProps}>\n\t\t\t\t{startContent}\n\t\t\t\t{children}\n\t\t\t\t{endContent}\n\t\t\t\t{isClosable && !isDisabled && (\n\t\t\t\t\t<CloseButton\n\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<CloseIcon size={size} />\n\t\t\t\t\t</CloseButton>\n\t\t\t\t)}\n\t\t\t</StyledChip>\n\t\t);\n\t},\n);\n\nChip.displayName = \"Chip\";\n"],"names":["getChipVariantStyles","props","theme","variant","color","isDisabled","baseColor","getColorVariant","lightColor","darkColor","css","getChipSizeStyles","size","dotPadding","getChipRadiusStyles","radius","StyledChip","styled","CloseButton","CloseIcon","jsxs","jsx","Chip","React","children","isClosable","onClose","startContent","endContent","className","ref","useTheme","chipProps","handleClose","e"],"mappings":"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"}