@chakra-ui/system
Version:
Chakra UI system primitives
1 lines • 4.37 kB
Source Map (JSON)
{"version":3,"sources":["../src/system.ts"],"sourcesContent":["import { useColorMode } from \"@chakra-ui/color-mode\"\nimport {\n css,\n isStyleProp,\n StyleProps,\n SystemStyleObject,\n} from \"@chakra-ui/styled-system\"\nimport { Dict, filterUndefined, objectFilter, runIfFn } from \"@chakra-ui/utils\"\nimport { assignAfter } from \"@chakra-ui/object-utils\"\nimport createStyled, { CSSObject, FunctionInterpolation } from \"@emotion/styled\"\nimport React from \"react\"\nimport { shouldForwardProp } from \"./should-forward-prop\"\nimport { As, ChakraComponent, ChakraProps, PropsOf } from \"./system.types\"\nimport { DOMElements } from \"./system.utils\"\n\nconst emotion_styled = ((createStyled as any).default ??\n createStyled) as typeof createStyled\n\ntype StyleResolverProps = SystemStyleObject & {\n __css?: SystemStyleObject\n sx?: SystemStyleObject\n theme: any\n css?: CSSObject\n}\n\ninterface GetStyleObject {\n (options: {\n baseStyle?:\n | SystemStyleObject\n | ((props: StyleResolverProps) => SystemStyleObject)\n }): FunctionInterpolation<StyleResolverProps>\n}\n\n/**\n * Style resolver function that manages how style props are merged\n * in combination with other possible ways of defining styles.\n *\n * For example, take a component defined this way:\n * ```jsx\n * <Box fontSize=\"24px\" sx={{ fontSize: \"40px\" }}></Box>\n * ```\n *\n * We want to manage the priority of the styles properly to prevent unwanted\n * behaviors. Right now, the `sx` prop has the highest priority so the resolved\n * fontSize will be `40px`\n */\nexport const toCSSObject: GetStyleObject =\n ({ baseStyle }) =>\n (props) => {\n const { theme, css: cssProp, __css, sx, ...rest } = props\n const styleProps = objectFilter(rest, (_, prop) => isStyleProp(prop))\n const finalBaseStyle = runIfFn(baseStyle, props)\n const finalStyles = assignAfter(\n {},\n __css,\n finalBaseStyle,\n filterUndefined(styleProps),\n sx,\n )\n const computedCSS = css(finalStyles)(props.theme)\n return cssProp ? [computedCSS, cssProp] : computedCSS\n }\n\nexport interface ChakraStyledOptions extends Dict {\n shouldForwardProp?(prop: string): boolean\n label?: string\n baseStyle?:\n | SystemStyleObject\n | ((props: StyleResolverProps) => SystemStyleObject)\n}\n\nexport function styled<T extends As, P extends object = {}>(\n component: T,\n options?: ChakraStyledOptions,\n) {\n const { baseStyle, ...styledOptions } = options ?? {}\n\n if (!styledOptions.shouldForwardProp) {\n styledOptions.shouldForwardProp = shouldForwardProp\n }\n\n const styleObject = toCSSObject({ baseStyle })\n const Component = emotion_styled(\n component as React.ComponentType<any>,\n styledOptions,\n )(styleObject)\n\n const chakraComponent = React.forwardRef(function ChakraComponent(\n props,\n ref,\n ) {\n const { colorMode, forced } = useColorMode()\n return React.createElement(Component, {\n ref,\n \"data-theme\": forced ? colorMode : undefined,\n ...props,\n })\n })\n\n return chakraComponent as ChakraComponent<T, P>\n}\n\nexport type HTMLChakraComponents = {\n [Tag in DOMElements]: ChakraComponent<Tag, {}>\n}\n\nexport type HTMLChakraProps<T extends As> = Omit<\n PropsOf<T>,\n \"ref\" | keyof StyleProps\n> &\n ChakraProps & { as?: As }\n"],"mappings":";;;;;;AAAA,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAe,iBAAiB,cAAc,eAAe;AAC7D,SAAS,mBAAmB;AAC5B,OAAO,kBAAwD;AAC/D,OAAO,WAAW;AAVlB;AAeA,IAAM,kBAAmB,kBAAqB,YAArB,YACvB;AA8BK,IAAM,cACX,CAAC,EAAE,UAAU,MACb,CAAC,UAAU;AACT,QAAM,EAAE,OAAO,KAAK,SAAS,OAAO,IAAI,GAAG,KAAK,IAAI;AACpD,QAAM,aAAa,aAAa,MAAM,CAAC,GAAG,SAAS,YAAY,IAAI,CAAC;AACpE,QAAM,iBAAiB,QAAQ,WAAW,KAAK;AAC/C,QAAM,cAAc;AAAA,IAClB,CAAC;AAAA,IACD;AAAA,IACA;AAAA,IACA,gBAAgB,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,IAAI,WAAW,EAAE,MAAM,KAAK;AAChD,SAAO,UAAU,CAAC,aAAa,OAAO,IAAI;AAC5C;AAUK,SAAS,OACd,WACA,SACA;AACA,QAAM,EAAE,WAAW,GAAG,cAAc,IAAI,4BAAW,CAAC;AAEpD,MAAI,CAAC,cAAc,mBAAmB;AACpC,kBAAc,oBAAoB;AAAA,EACpC;AAEA,QAAM,cAAc,YAAY,EAAE,UAAU,CAAC;AAC7C,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,EACF,EAAE,WAAW;AAEb,QAAM,kBAAkB,MAAM,WAAW,SAAS,gBAChD,OACA,KACA;AACA,UAAM,EAAE,WAAW,OAAO,IAAI,aAAa;AAC3C,WAAO,MAAM,cAAc,WAAW;AAAA,MACpC;AAAA,MACA,cAAc,SAAS,YAAY;AAAA,MACnC,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AAED,SAAO;AACT;","names":[]}