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

Flexible and customizable React UI components for Frank Authentication

{"version":3,"file":"spinner.cjs","sources":["../../../../../src/components/ui/spinner/spinner.tsx"],"sourcesContent":["import { useTheme } from \"@/theme/context\";\nimport { type StyledProps, getColorVariant } from \"@/theme/styled\";\nimport type { Theme } from \"@/theme/theme\";\nimport { css, keyframes } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport React from \"react\";\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Spinner color theme */\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| \"current\";\n\t/** Spinner size */\n\tsize?: \"sm\" | \"md\" | \"lg\" | number;\n\t/** Label text */\n\tlabel?: string;\n\t/** Label placement */\n\tlabelPlacement?: \"start\" | \"end\" | \"top\" | \"bottom\";\n\t/** Custom class name */\n\tclassName?: string;\n\t/** Custom styles */\n\tcss?: any;\n}\n\ntype StyledSpinnerProps = StyledProps<SpinnerProps>;\n\nconst spin = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst getSpinnerColorStyles = (props: StyledSpinnerProps) => {\n\tconst { theme, color = \"primary\" } = props;\n\n\tif (color === \"current\") {\n\t\treturn css`\n      border-color: currentColor;\n      border-top-color: transparent;\n    `;\n\t}\n\n\tconst baseColor = getColorVariant(theme, color, 500);\n\tconst lightColor = getColorVariant(theme, color, 200);\n\n\treturn css`\n    border-color: ${lightColor};\n    border-top-color: ${baseColor};\n  `;\n};\n\nconst getSpinnerSizeStyles = (props: StyledSpinnerProps) => {\n\tconst { size = \"md\" } = props;\n\n\tif (typeof size === \"number\") {\n\t\treturn css`\n      width: ${size}px;\n      height: ${size}px;\n      border-width: ${Math.max(2, size / 8)}px;\n    `;\n\t}\n\n\tswitch (size) {\n\t\tcase \"sm\":\n\t\t\treturn css`\n        width: 16px;\n        height: 16px;\n        border-width: 2px;\n      `;\n\t\tcase \"md\":\n\t\t\treturn css`\n        width: 24px;\n        height: 24px;\n        border-width: 2px;\n      `;\n\t\tcase \"lg\":\n\t\t\treturn css`\n        width: 32px;\n        height: 32px;\n        border-width: 3px;\n      `;\n\t\tdefault:\n\t\t\treturn css`\n        width: 24px;\n        height: 24px;\n        border-width: 2px;\n      `;\n\t}\n};\n\nconst StyledSpinner = styled.div<StyledSpinnerProps>`\n  border-style: solid;\n  border-radius: 50%;\n  animation: ${spin} 1s linear infinite;\n\n  ${getSpinnerColorStyles}\n  ${getSpinnerSizeStyles}\n\n  /* Custom CSS prop */\n  ${(props) => props.css}\n`;\n\nconst SpinnerContainer = styled.div<{\n\tlabelPlacement?: \"start\" | \"end\" | \"top\" | \"bottom\";\n\ttheme: Theme;\n}>`\n  display: inline-flex;\n  align-items: center;\n  gap: ${(props) => props.theme.spacing[2]};\n\n  ${(props) => {\n\t\tswitch (props.labelPlacement) {\n\t\t\tcase \"top\":\n\t\t\t\treturn css`\n          flex-direction: column-reverse;\n        `;\n\t\t\tcase \"bottom\":\n\t\t\t\treturn css`\n          flex-direction: column;\n        `;\n\t\t\tcase \"start\":\n\t\t\t\treturn css`\n          flex-direction: row-reverse;\n        `;\n\t\t\tdefault:\n\t\t\t\treturn css`\n          flex-direction: row;\n        `;\n\t\t}\n\t}}\n`;\n\nconst Label = styled.span<{ size?: \"sm\" | \"md\" | \"lg\" | number; theme: Theme }>`\n  color: ${(props) => props.theme.colors.text.secondary};\n  font-size: ${(props) => {\n\t\tif (typeof props.size === \"number\") {\n\t\t\treturn `${Math.max(12, props.size * 0.6)}px`;\n\t\t}\n\n\t\tswitch (props.size) {\n\t\t\tcase \"sm\":\n\t\t\t\treturn props.theme.fontSizes.sm;\n\t\t\tcase \"lg\":\n\t\t\t\treturn props.theme.fontSizes.lg;\n\t\t\tdefault:\n\t\t\t\treturn props.theme.fontSizes.base;\n\t\t}\n\t}};\n  font-weight: ${(props) => props.theme.fontWeights.medium};\n`;\n\nexport const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n\t(\n\t\t{\n\t\t\tcolor = \"primary\",\n\t\t\tsize = \"md\",\n\t\t\tlabel,\n\t\t\tlabelPlacement = \"end\",\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 spinnerProps = {\n\t\t\t...props,\n\t\t\tcolor,\n\t\t\tsize,\n\t\t\tclassName,\n\t\t\tcss,\n\t\t};\n\n\t\tconst spinnerElement = <StyledSpinner theme={theme} {...spinnerProps} />;\n\n\t\tif (!label) {\n\t\t\treturn React.cloneElement(spinnerElement, { ref });\n\t\t}\n\n\t\treturn (\n\t\t\t<SpinnerContainer theme={theme} labelPlacement={labelPlacement}>\n\t\t\t\t{spinnerElement}\n\t\t\t\t<Label theme={theme} size={size}>\n\t\t\t\t\t{label}\n\t\t\t\t</Label>\n\t\t\t</SpinnerContainer>\n\t\t);\n\t},\n);\n\nSpinner.displayName = \"Spinner\";\n"],"names":["spin","keyframes","getSpinnerColorStyles","props","theme","color","css","baseColor","getColorVariant","lightColor","getSpinnerSizeStyles","size","StyledSpinner","styled","SpinnerContainer","Label","Spinner","React","label","labelPlacement","className","ref","useTheme","spinnerProps","spinnerElement","jsx","jsxs"],"mappings":"iUA8BMA,EAAOC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASPC,EAAyBC,GAA8B,CAC5D,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAQ,SAAc,EAAAF,EAErC,GAAIE,IAAU,UACN,OAAAC,EAAA;AAAA;AAAA;AAAA,MAMR,MAAMC,EAAYC,EAAA,gBAAgBJ,EAAOC,EAAO,GAAG,EAC7CI,EAAaD,EAAA,gBAAgBJ,EAAOC,EAAO,GAAG,EAE7C,OAAAC,EAAA;AAAA,oBACYG,CAAU;AAAA,wBACNF,CAAS;AAAA,GAEjC,EAEMG,EAAwBP,GAA8B,CACrD,KAAA,CAAE,KAAAQ,EAAO,IAAA,EAASR,EAEpB,GAAA,OAAOQ,GAAS,SACZ,OAAAL,EAAA;AAAA,eACMK,CAAI;AAAA,gBACHA,CAAI;AAAA,sBACE,KAAK,IAAI,EAAGA,EAAO,CAAC,CAAC;AAAA,MAI1C,OAAQA,EAAM,CACb,IAAK,KACG,OAAAL,EAAA;AAAA;AAAA;AAAA;AAAA,QAKR,IAAK,KACG,OAAAA,EAAA;AAAA;AAAA;AAAA;AAAA,QAKR,IAAK,KACG,OAAAA,EAAA;AAAA;AAAA;AAAA;AAAA,QAKR,QACQ,OAAAA,EAAA;AAAA;AAAA;AAAA;AAAA,OAAA,CAMV,EAEMM,EAAgBC,EAAO,QAAA;AAAA;AAAA;AAAA,eAGdb,CAAI;AAAA;AAAA,IAEfE,CAAqB;AAAA,IACrBQ,CAAoB;AAAA;AAAA;AAAA,IAGnBP,GAAUA,EAAM,GAAG;AAAA,EAGlBW,EAAmBD,EAAO,QAAA;AAAA;AAAA;AAAA,SAMtBV,GAAUA,EAAM,MAAM,QAAQ,CAAC,CAAC;AAAA;AAAA,IAErCA,GAAU,CACb,OAAQA,EAAM,eAAgB,CAC7B,IAAK,MACG,OAAAG,EAAA;AAAA;AAAA,UAGR,IAAK,SACG,OAAAA,EAAA;AAAA;AAAA,UAGR,IAAK,QACG,OAAAA,EAAA;AAAA;AAAA,UAGR,QACQ,OAAAA,EAAA;AAAA;AAAA,SAAA,CAIV,CAAC;AAAA,EAGIS,EAAQF,EAAO,QAAA;AAAA,WACTV,GAAUA,EAAM,MAAM,OAAO,KAAK,SAAS;AAAA,eACvCA,GAAU,CACpB,GAAA,OAAOA,EAAM,MAAS,SACzB,MAAO,GAAG,KAAK,IAAI,GAAIA,EAAM,KAAO,EAAG,CAAC,KAGzC,OAAQA,EAAM,KAAM,CACnB,IAAK,KACG,OAAAA,EAAM,MAAM,UAAU,GAC9B,IAAK,KACG,OAAAA,EAAM,MAAM,UAAU,GAC9B,QACQ,OAAAA,EAAM,MAAM,UAAU,IAAA,CAEhC,CAAC;AAAA,iBACgBA,GAAUA,EAAM,MAAM,YAAY,MAAM;AAAA,EAG7Ca,EAAUC,EAAM,QAAA,WAC5B,CACC,CACC,MAAAZ,EAAQ,UACR,KAAAM,EAAO,KACP,MAAAO,EACA,eAAAC,EAAiB,MACjB,UAAAC,EACA,IAAAd,EACA,GAAGH,GAEJkB,IACI,CACE,KAAA,CAAE,MAAAjB,CAAM,EAAIkB,WAAS,EAErBC,EAAe,CACpB,GAAGpB,EACH,MAAAE,EACA,KAAAM,EACA,UAAAS,EACA,IAAAd,CACD,EAEMkB,EAAiBC,EAAAA,IAACb,EAAc,CAAA,MAAAR,EAAe,GAAGmB,EAAc,EAEtE,OAAKL,EAKJQ,EAAA,KAACZ,EAAiB,CAAA,MAAAV,EAAc,eAAAe,EAC9B,SAAA,CAAAK,EACAC,EAAA,IAAAV,EAAA,CAAM,MAAAX,EAAc,KAAAO,EACnB,SACFO,CAAA,CAAA,CAAA,EACD,EATOD,EAAM,QAAA,aAAaO,EAAgB,CAAE,IAAAH,EAAK,CASjD,CAGH,EAEAL,EAAQ,YAAc"}