UNPKG

@frank-auth/react

Version:

Flexible and customizable React UI components for Frank Authentication

1 lines 1.89 kB
{"version":3,"file":"styled.cjs","sources":["../../../src/theme/styled.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport type { Theme } from \"./theme\";\n\n// Utility type for getting theme from props\nexport type StyledProps<T = Record<any, any>> = T & { theme: Theme };\n\n// Helper function to create responsive styles\nexport const responsive = (\n\tstyles: Record<string, any>,\n\tbreakpoints = {\n\t\tsm: \"640px\",\n\t\tmd: \"768px\",\n\t\tlg: \"1024px\",\n\t\txl: \"1280px\",\n\t},\n) => {\n\treturn Object.entries(styles).map(([key, value]) => {\n\t\tif (key === \"base\") {\n\t\t\treturn value;\n\t\t}\n\t\tconst breakpoint = breakpoints[key as keyof typeof breakpoints];\n\t\treturn `@media (min-width: ${breakpoint}) { ${value} }`;\n\t});\n};\n\n// Color variant utilities\nexport const getColorVariant = (\n\ttheme: Theme,\n\tvariant:\n\t\t| \"primary\"\n\t\t| \"secondary\"\n\t\t| \"success\"\n\t\t| \"warning\"\n\t\t| \"danger\" = \"primary\",\n\tshade: keyof typeof theme.colors.primary = 500,\n) => {\n\tswitch (variant) {\n\t\tcase \"primary\":\n\t\t\treturn theme.colors.primary[shade];\n\t\tcase \"secondary\":\n\t\t\treturn theme.colors.secondary[shade];\n\t\tcase \"success\":\n\t\t\treturn theme.colors.success[shade];\n\t\tcase \"warning\":\n\t\t\treturn theme.colors.warning[shade];\n\t\tcase \"danger\":\n\t\t\treturn theme.colors.danger[shade];\n\t\tdefault:\n\t\t\treturn theme.colors.primary[shade];\n\t}\n};\n\nexport default styled;\n"],"names":["getColorVariant","theme","variant","shade"],"mappings":"2GA0BO,MAAMA,EAAkB,CAC9BC,EACAC,EAKc,UACdC,EAA2C,MACvC,CACJ,OAAQD,EAAS,CAChB,IAAK,UACG,OAAAD,EAAM,OAAO,QAAQE,CAAK,EAClC,IAAK,YACG,OAAAF,EAAM,OAAO,UAAUE,CAAK,EACpC,IAAK,UACG,OAAAF,EAAM,OAAO,QAAQE,CAAK,EAClC,IAAK,UACG,OAAAF,EAAM,OAAO,QAAQE,CAAK,EAClC,IAAK,SACG,OAAAF,EAAM,OAAO,OAAOE,CAAK,EACjC,QACQ,OAAAF,EAAM,OAAO,QAAQE,CAAK,CAAA,CAEpC"}